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

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

了解了以上響應(yīng)式布局，下面重點(diǎn)介紹一下 flex彈性布局 ,非常有用,但是有記憶障礙的我，為了下次還能順利的記起來(lái)，還是總結(jié)一下吧，順便把我看的幾個(gè)博客內(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í)，設(shè)置盒子的padding和border，盒子模型寬高會(huì)變大，向外擴(kuò)展，實(shí)際content內(nèi)容不變(注意：margin始終在盒子外)；

border-box(IE盒子模型)

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

3. 樣式兼容（postCss插件）
vscode 自動(dòng)添加 css 兼容代碼插件

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

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

1. 彈性容器
display:flex;

2. 容器屬性

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

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

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

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

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屬性的簡(jiǎn)寫形式 )
默認(rèn)是 row nowrap

3. 項(xiàng)目屬性

order
order: /* default 0 */

JavaScript 語(yǔ)法：object.style.order="2"

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

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

JavaScript 語(yǔ)法：object.style.flexGrow="5"

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

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

JavaScript 語(yǔ)法：object.style.flexShrink="5"

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

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

JavaScript 語(yǔ)法：object.style.flexBasis="200px"

定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(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 語(yǔ)法：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 語(yǔ)法：object.style.alignSelf="center"

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

codepan