.container { flex-direction: row | row-reverse | column | column-reverse;} 幾種支持的屬性: - row (default): left to right in ltr; right to left in rtl - row-reverse: right to left in ltr; left to right in rtl - column: 和 row 屬性工作原理相同,只不過是從 top 到 bottom 布局 - column-reverse: 同 row-reverse,只不過是從 bottom 到 top flex-grow 屬性該屬性定義了 flex item 在必要時增長寬度的能力。它接受一個作為比例的無單位值。 它規(guī)定了項目應該占用彈性容器內(nèi)的可用空間量。 下圖第一行,三個元素的 flex item 的 flex-grow 都為 1,因此共同平分 flex 容器剩余的寬度。 下圖第二行中間的 flex item 的 flex-grow 屬性為 2,其他兩個元素為 1,因此寬度比例為1:2:1. 如果所有項目都將 flex-grow 設置為 1,則容器中的剩余空間將平均分配給所有子項。 如果其中一個 item 元素的值為 2,則該 item 將占據(jù)其他 item 的兩倍空間(或者至少會嘗試)。 justify-content該屬性定義了沿主軸的對齊方式。 當一行中的所有 flex 項目已達到其最大大小時,它有助于分配剩余的額外可用空間。 當項目溢出線時,它還對項目的對齊施加一些控制。
|
|
來自: 汪子熙 > 《JavaScript》