css flexible box layoutdisplay: flex (三)

percentage (%) margins on the flex item

… percentages all resolve against their containing block’s width in horizontal writing modes, for details.

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

<ol>
 <li>
  <p>
ol {
 display: flex;
 flex-direction: column;
 width: 30vw;
}
ol > li {
 margin-left: 50%;
}

percentage (%) paddings on the flex item

  1. 方孝孺

  2. 王安石

  3. 王勃

  4. 范仲淹

<section>
 <ol>
  <li>
   <p>
ol {
 display: flex;
 width: 30vw;
}
ol > li:first-child {
 padding-top: 40%;
 padding-bottom: 10%;
 transition: .25s;
}
section:hover > ol > li:first-child,
section:focus-within > ol > li:first-child {
 padding-top: 20%;
 padding-bottom: 20%;
}

蘇軾

前赤壁賦

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

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

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

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

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

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