css – flexbox 速記
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.container // 排咧左至右或右至左，影響 flex-direction writing-mode: ltr | rtl; // flex-direction 和 flex-wrap 的縮寫 flex-flow: <flex-direction> | <flex-wrap>; // main axis 的方向 flex-direction: row | row-reverse | column | column-reverse; // 產生換行效果 flex-wrap: nowrap | wrap | wrap-reverse; // 主要是用在當 main-axis 有換行時。此屬性相當於 justify-content 與 align-items 的綜合版 align-content: flex-start | flex-end | center | space-between | space-around | stretch; // flex item 在 main axis 上的排列位置 justify-content: flex-start | flex-end | center | space-between | space-around; // cross axis 的方向 align-items: flex-start | flex-end | center | baseline | stretch; .item // 元素位置 order: <integer>; // 縮寫，預設值為 0 0 auto flex: <flex-grow> <flex-shrink> <flex-basis>; // 自動佔滿剩餘寬度 flex-grow: <number>; // 為 flex-grow 的相反 flex-shrink: <number>; // 最小的寬度或高度 flex-basis: <length> | auto; // 可以將個別 item 的 align-items 屬性覆蓋過去 align-self: auto | flex-start | flex-end | center | baseline | stretch; |