Flex模型

元素表現(xiàn)為 flex 框時(shí)，它們沿著兩個(gè)軸來(lái)布局：

主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁(yè)面上的橫向的行、縱向的列）。該軸的開(kāi)始和結(jié)束被稱為 main start 和 main end。
交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開(kāi)始和結(jié)束被稱為 cross start 和 cross end。
設(shè)置了 display: flex 的父元素被稱之為 flex 容器（flex container）。.container
在 flex 容器中的彈性盒子元素被稱之為 flex 項(xiàng)（flex item）。.item
一、flex container屬性

display
給flex容器設(shè)置display屬性
.container{
display:flex | inline-flex
}

flex-direction
設(shè)置主軸的方位和方向。
.container {
flex-direction: row(default) | row-reverse | column | column-reverse;
}

flex-wrap
設(shè)置換行
.container {
flex-wrap: nowrap(default) | wrap | wrap-reverse;
}

flex-flow
集合屬性，同時(shí)定義flex-direction和flex-wrap。
.container {
flex-flow: row-reverse wrap-reverse;
}

justify-content
設(shè)置行內(nèi)的項(xiàng)目如何水平對(duì)齊
.container {
justify-content: flex-start(default) | flex-end | center | space-between | space-around | space-evenly;
}

align-items
設(shè)置行內(nèi)的項(xiàng)目如何垂直對(duì)齊。
.container {
align-items: stretch(default) | flex-start | flex-end | center | baseline;
}

align-content
如果容器的交叉軸方向有富余空間，設(shè)置每行應(yīng)該如何垂直對(duì)齊。
.container {
align-content: stretch(default) | flex-start | flex-end | center | space-between | space-around | space-evenly;
}

二、flex item屬性

order
設(shè)置彈性項(xiàng)目在布局時(shí)的順序。
.item {
order: <integer>;
}

默認(rèn)值是0
order 值大的 flex 項(xiàng)比 order 值小的在顯示順序中更靠后。
flex-grow
設(shè)置flex項(xiàng)怎么瓜分行內(nèi)的富余空間。定義flex項(xiàng)（flex item）的拉伸因子。
.item {
flex-grow: <number>;
}

默認(rèn)值是0。
按照總份數(shù)瓜分富余空間。
flex-shrink
設(shè)置flex項(xiàng)怎么承擔(dān)行內(nèi)的負(fù)債空間。定義flex項(xiàng)（flex item）的收縮規(guī)則。
.item {
flex-shrink: <number>;
}

默認(rèn)值是1。
按照總份數(shù)承擔(dān)行內(nèi)的負(fù)債空間。
flex-basis
設(shè)置了 flex 元素在主軸方向上的初始大小。它是width屬性的替代品，優(yōu)先級(jí)比width高。
.item {
flex-basis: <'width'>;
}

默認(rèn)值是auto
依賴flex項(xiàng)目的content
flex
一個(gè)集合屬性，可以同時(shí)設(shè)置flex-grow、flex-shrink和flex-basis。
.item {
flex: <'flex-grow'> | <'flex-grow'> <'flex-shrink'> <'flex-basis'>;
}

align-self
設(shè)置彈性項(xiàng)目自身在行內(nèi)的垂直對(duì)齊方式。
.item {
align-self: auto(default) | stretch | flex-start | flex-end | center | baseline;
}

默認(rèn)值是auto。