css flexible box layoutdisplay: flex (二)

二單元 1×1 左右分靠邊

  1. 方孝孺

  2. 王安石

<ol>
 <li>
  <p>
ol {
 display: flex;
 justify-content: space-between;
}

二單元 1×1 左右分靠邊

  1. 王勃

  2. 范仲淹

<ol>
 <li>
  <p>
ol {
 display: flex;
}
ol > *:first-child {
 margin-right: auto;
}

/*** or
ol > *:last-child {
 margin-left: auto;
}*/

二單元 1×1 上下分靠邊

  1. 方孝孺

  2. 王安石

<ol>
 <li>
  <p>
ol {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 min-height: 20em;
}*/

二單元 1×1 上下分靠邊

  1. 王勃

  2. 范仲淹

<ol>
 <li>
  <p>
ol {
 display: flex;
 flex-direction: column;
 min-height: 20em;
}
ol > *:last-child {
 margin-top: auto;
}

/*** or
ol > *:first-child {
 margin-bottom: auto;
}*/

四單元 1×3 分靠邊

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

<ol>
 <li>
  <p>
ol {
 display: flex;
}
ol > *:first-child {
 margin-right: auto;
}

/*** or
ol > *:nth-child(2) {
 margin-left: auto;
}*/

/*** the other vertical direction
ol {
 display: flex;
 flex-direction: column;
 min-height: 20em;
}
ol > *:first-child {
 margin-bottom: auto;
}*/

四單元 2×2 分靠邊

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

<ol>
 <li>
  <p>
ol {
 display: flex;
}
ol > *:nth-child(2) {
 margin-right: auto;
}

/*** or
ol > *:nth-child(3) {
 margin-left: auto;
}*/

/*** the other vertical direction
ol {
 display: flex;
 flex-direction: column;
 min-height: 20em;
}
ol > *:nth-child(2) {
 margin-bottom: auto;
}*/

四單元 首尾分靠邊 餘二置中

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

<ol>
 <li>
  <p>
ol {
 display: flex;
}
ol > *:first-child {
 margin-right: auto;
}
ol > *:last-child {
 margin-left: auto;
}

/*** the other vertical direction
ol {
 display: flex;
 flex-direction: column;
 min-height: 20em;
}
ol > *:first-child {
 margin-bottom: auto;
}
ol > *:last-child {
 margin-top: auto;
}*/

五單元 首二尾二分靠邊 餘一置中

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

  5. 陶淵明

<ol>
 <li>
  <p>
ol {
 display: flex;
}
ol > *:nth-child(3) {
 margin-right: auto;
 margin-left: auto;
}

/*** the other vertical direction
ol {
 display: flex;
 flex-direction: column;
 min-height: 20em;
}
ol > *:nth-child(3) {
 margin-top: auto;
 margin-bottom: auto;
}*/

二單元 1×1 分靠邊 其一依剩餘空間擴展尺寸

  1. 方孝孺

  2. 王安石

<ol>
 <li>
  <p>
ol {
 display: flex;
}
ol > *:first-child {
 flex: 0 1 16%;
}
ol > *:last-child {
 flex: auto; /* = flex: 1 1 auto;*/
}

三單元 二邊指定尺寸 中間依剩餘空間擴展尺寸

  1. 方孝孺

  2. 王安石

  3. 王勃

<ol>
 <li>
  <p>
ol {
 display: flex;
 min-height: 20em;
}
ol > *:first-child {
 flex: 0 1 18%;
}
ol > *:last-child {
 flex: 0 1 12%;
}
ol > *:nth-child(2) {
 flex: auto; /* = flex: 1 1 auto;*/
}

五單元 首二尾二分靠邊 餘一置中並依剩餘空間擴展尺寸

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

  5. 陶淵明

<ol>
 <li>
  <p>
ol {
 display: flex;
}
ol > *:nth-child(3) {
 flex: auto; /* = flex: 1 1 auto;*/
}
ol > *:nth-child(3) > p {
 text-align: center;
}

五單元 首二尾二分靠邊 餘一置中 內容上下置中

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

  5. 陶淵明

<ol>
 <li>
  <p>
ol {
 display: flex;
 min-height: 20em;
}
ol > *:nth-child(3) {
 flex: auto; /* = flex: 1 1 auto;*/
}
ol > * {
 display: flex;
 flex-direction: column;
 justify-content: center;
}
ol > *:nth-child(3) > p {
 text-align: center;
}

五單元 首二尾二分靠邊 餘一置中 內容上下置中

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

  5. 陶淵明

<ol>
 <li>
  <p>
ol {
 display: flex;
 min-height: 20em;
}
ol > *:nth-child(3) {
 flex: auto; /* = flex: 1 1 auto;*/
}
ol > * {
 display: flex;
 flex-direction: column;
}
ol > * > p {
 margin-top: auto;
 margin-bottom: auto;
}
ol > *:nth-child(3) > p {
 text-align: center;
}

蘇軾

前赤壁賦

壬戌之秋,七月既望,蘇子與客泛舟遊於赤壁之下。清風徐來,水波不興,舉酒屬客,誦明月之詩,歌窈窕之章。少焉,月出於東山之上,徘徊於斗牛之間,白露橫江,水光接天;縱一葦之所如,凌萬頃之茫然。浩浩乎如馮虛御風,而不知其所止;飄飄乎如遺世獨立,羽化而登仙。

於是飲酒樂甚,扣舷而歌之。歌曰:「桂棹兮蘭槳,撃空明兮泝流光。渺渺兮予懷,望美人兮天一方。」客有吹洞簫者,倚歌而和之,其聲嗚嗚然,如怨、如慕、如泣、如訴,餘音嫋嫋,不絕如縷。舞幽壑之潛蛟,泣孤舟之嫠婦。

蘇子愀然,正襟危坐,而問客曰:「何為其然也?」

客曰:「『月明星稀,烏鵲南飛』此非曹孟德之詩乎?西望夏口,東望武昌,山川相繆,鬱乎蒼蒼,此非孟德之困於周郎者乎?方其破荊州,下江陵, 順流而東也,舳艫千里,旌旗蔽空,釃酒臨江,橫槊賦詩,固一世之雄也,而今安在哉?況吾與子漁樵於江渚之上,侶魚蝦而友麋鹿;駕一葉之扁舟,擧匏樽以相 屬。寄蜉蝣於天地,渺滄海之一粟。哀吾生之須臾,羨長江之無窮。挾飛仙以遨遊,抱明月而長終。知不可乎驟得,託遺響於悲風。」

蘇子曰:「客亦知夫水與月乎?逝者如斯,而未嘗往也;盈虛者如彼,而卒莫消長也,蓋將自其變者而觀之,則天地曾不能以一瞬;自其 不變者而觀之,則物與我皆無盡也,而又何羨乎?且夫天地之間,物各有主,苟非吾之所有,雖一毫而莫取。惟江上之清風,與山間之明月,耳得之而為聲,目遇之 而成色,取之無禁,用之不竭,是造物者之無盡藏也,而吾與子之所共適。」

客喜而笑,洗盞更酌。肴核既盡,杯盤狼藉,相與枕藉乎舟中,不知東方之既白。