一、基本概念
| //任何一個(gè)容器都可以指定為Flex布局。 .box{ display: flex; } //行內(nèi)元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。 |
二、容器屬性
1. flex-direction
flex-direction 決定項(xiàng)目的排列方向
| .box { flex-direction: row | row-reverse | column | column-reverse; } |
2. flex-wrap
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上。flex-wrap 屬性定義，如果一條軸線排不下，如何換行。
| .box{ flex-wrap: nowrap | wrap | wrap-reverse; } |
3. flex-flow
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡(jiǎn)寫形式，默認(rèn)值為 row nowrap。
| .box { flex-flow: <flex-direction> || <flex-wrap>; } |
4. justify-content
justify-content 屬性定義了項(xiàng)目在水平方向的對(duì)齊方式。
| .box { justify-content: flex-start | flex-end | center | space-between | space-around; } |
5. align-item
align-item 屬性定義了項(xiàng)目在垂直方向的對(duì)齊方式。
| .box { align-items: flex-start | flex-end | center | baseline | stretch; } |
3.6 align-content屬性
align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
| .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } |
三、項(xiàng)目的屬性
1. order
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
| .item { order: <integer>; } |
2. flex-grow
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
| .item { flex-grow: <number>; /* default 0 */ } //如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。 |
