本文目的

簡單介紹Flex各個(gè)屬性的作用，方便使用時(shí)查詢。
對于具體的運(yùn)作方式，網(wǎng)上找 示例圖片 看一看即可。

簡介

display:flex;屬性會(huì)讓容器元素 啟用CSS的一種布局規(guī)則 FFC(Flex Formatting Context)，同樣的布局規(guī)則 還有BFC(塊級格式化上下文) IFC(內(nèi)聯(lián)格式化上下文) Grid的GFC。

.container {
    display: flex; /* or inline-flex */
}
flex彈性伸縮盒：默認(rèn)使容器占據(jù)一整行寬度，高度根據(jù)子元素自適應(yīng)。
inline-flex內(nèi)聯(lián)塊級彈性伸縮盒：寬高均由子元素自適應(yīng)，特別適合做一些根據(jù)內(nèi)容而不斷增寬的組件。

Flex的屬性分2類：作用于 容器元素 和 容器內(nèi)子元素。

父容器的屬性

除了display: flex外，還有下面這些。
flex-direction 子元素的排列方向，水平/垂直。
flex-wrap 換行。
flex-flow 方向+換行(direction+wrap一起用)。
justify-content 橫軸對齊方式。
align-items 縱軸對齊方式。
align-content 彈性盒 堆疊伸縮行的對齊方式。

子元素的屬性

order 書寫順序，數(shù)值小的在前面，還可以是負(fù)數(shù)。
flex-grow 彈性盒的擴(kuò)展比率,根據(jù)彈性盒子元素所設(shè)置的擴(kuò)展因子作為比率來分配剩余空間 收縮比率, 根據(jù)子元素所設(shè)置的收縮因子作為比率來收縮空間。
flex-basis 伸縮基準(zhǔn)值，其覆蓋width的值，受其它屬性的影響，如flex-shrink。
flex-shrink 收縮比率,根據(jù)彈性盒子元素所設(shè)置的收縮因子作為比率來收縮空間。
flex 是flex-grow, flex-shrink,flex-basis 的縮寫。
align-self 元素在側(cè)軸（縱軸）方向上的對齊方式，可以覆蓋父容器align-items的設(shè)置。

flex-grow和shrink如何計(jì)算"比率"

flex-grow會(huì)“瓜分”父項(xiàng)的“剩余空間(主軸)”。
容器的寬度為400px, 子項(xiàng)1的占用為50px，子項(xiàng)2占用了70px，子項(xiàng)3占用了100px，<u>剩余空間為 400-50-70-100 = 180px。</u>
其中，子項(xiàng)1的flex-grow: 0(未設(shè)置默認(rèn)為0)， 子項(xiàng)2 flex-grow: 2，子項(xiàng)3 flex-grow: 1，故剩余空間分成3份，子項(xiàng)2占2份(120px)，子項(xiàng)3占1份(60px)。
所以，子項(xiàng)1真實(shí)的占用空間為: 50+0 = 50px， 子項(xiàng)2真實(shí)的占用空間為: 70+120 = 190px， 子項(xiàng)3真實(shí)的占用空間為: 100+60 = 160px。

同理，flex-shrink就是"減法", "吸收"超出 父容器的空間(主軸)。