摘要：它的所有子元素稱為項(xiàng)目，簡稱項(xiàng)目。注意，設(shè)為布局以后，子元素的和屬性將失效。詳細(xì)主軸和交叉軸的理解請看分鐘徹底弄懂布局布局練習(xí)鏈接

來源于 響應(yīng)式方法匯總

了解了以上響應(yīng)式布局，下面重點(diǎn)介紹一下 flex彈性布局 ,非常有用,但是有記憶障礙的我，為了下次還能順利的記起來，還是總結(jié)一下吧，順便把我看的幾個博客內(nèi)容和大家分享一下，寫的非常詳細(xì)，很好理解。

1. 查看css屬性兼容性情況
https://caniuse.com/

2. 盒子模型 box-sizing

content-box(標(biāo)準(zhǔn)盒子模型)

width = content-width;
解析：當(dāng)盒子內(nèi)容寬度固定時，設(shè)置盒子的padding和border，盒子模型寬高會變大，向外擴(kuò)展，實(shí)際content內(nèi)容不變(注意：margin始終在盒子外)；

border-box(IE盒子模型)

width = content-width + padding +border;
解析：當(dāng)盒子內(nèi)容寬度固定時，設(shè)置盒子的padding和border，盒子模型寬高不變，向內(nèi)擴(kuò)展，實(shí)際content內(nèi)容變小(注意：margin始終在盒子外)；

3. 樣式兼容（postCss插件）
vscode 自動添加 css 兼容代碼插件

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱”容器”。它的所有子元素稱為 Flex 項(xiàng)目（flex item），簡稱”項(xiàng)目”。

注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

1. 彈性容器
display:flex;

2. 容器屬性

justify-content------------項(xiàng)目在主軸上的對齊方式( 水平或垂直由flex-direction決定 )

flex-start    ( 默認(rèn) 居左 )
flex-end               ( 居右 )
center( 居中 )
space-between( 兩端對齊項(xiàng)目之間的間隔都相等 )
space-around( 每個項(xiàng)目兩側(cè)的間隔相等 )

align-items------------交叉軸上如何對齊( 水平或垂直由flex-direction決定 )

stretch( 默認(rèn) 如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度 )
flex-start    ( 對齊起點(diǎn) )
flex-end               ( 對齊終點(diǎn) )
center( 對齊中點(diǎn) )
baseline( 項(xiàng)目的第一行文字的基線對齊 )

flex-direction------------決定主軸的方向

row( 默認(rèn) 橫向排列 起點(diǎn)在左 )
row-reverse( 橫向排列 起點(diǎn)在右 )
column( 縱向排列 起點(diǎn)在頭【上】 )
row-reverse( 縱向排列 起點(diǎn)在尾【下】 )

flex-wrap------------子元素是否換行

nowrap( 默認(rèn) 不換行 )
wrap( 換行 )
wrap-reverse( 反向換行 )

flex-flow------------ ( flex-direction屬性和flex-wrap屬性的簡寫形式 )
默認(rèn)是 row nowrap

3. 項(xiàng)目屬性

order
order: /* default 0 */

JavaScript 語法：object.style.order="2"

規(guī)定項(xiàng)目順序
數(shù)值越小，排列越靠前
默認(rèn)值為0

flex-grow
flex-grow: ; /* default 0 */

JavaScript 語法：object.style.flexGrow="5"

規(guī)定項(xiàng)目的放大比例
如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）.如果一個項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍.
默認(rèn)值為0

flex-shrink
flex-shrink: number|initial|inherit; /* default 1 */

JavaScript 語法：object.style.flexShrink="5"

定義了項(xiàng)目的縮小比例
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小.如果一個項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時，前者不縮小.
默認(rèn)值為1

flex-basis
flex-basis: number|auto|initial|inherit; /* default auto */

JavaScript 語法：object.style.flexBasis="200px"

定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。
它可以設(shè)為跟width或height屬性一樣的值（ep:300px），則項(xiàng)目將占據(jù)固定空間.
默認(rèn)值為auto

flex
  flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;/* default 0 1 auto */

JavaScript 語法：object.style.flex="1"

默認(rèn)值為0 1 auto

align-self
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;/* default auto */

JavaScript 語法：object.style.alignSelf="center"

定義單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。
默認(rèn)值為auto,元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。

codepan