flex布局兼容知識點(diǎn)總結(jié)
==假設(shè)父容器class為box，子項(xiàng)目為item==
一舆床、定義容器的display屬性
.box{
display: -webkit-flex;
displau: flex;
}
二、容器樣式
.box{
flex-direction: row | row-reverse | column | column-reverse; /*主軸方向：左到右（默認(rèn)） | 右到左 | 上到下 | 下到上*/
flex-wrap: nowrap | wrap | wrap-reverse; /*換行：不換行（默認(rèn)） | 換行 | 換行并第一行在下方*/
flex-flow: <flex-direction> <flex-wrap>; /*主軸方向和換行簡寫*/
justify-content: flex-start | flex-end | center | space-between | space-around; /*主軸對齊方式：左對齊（默認(rèn)） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/
align-items: flex-start | flex-end | center | baseline | stretch; /*交叉軸對齊方式：頂部對齊（默認(rèn)） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch; /*多主軸對齊：頂部對齊（默認(rèn)） | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 上下平均分布*/}
flex-direction值介紹如下：
row: 默認(rèn)值。靈活的項(xiàng)目將水平顯示潘鲫，正如一個(gè)行一樣。
row-reverse: 與 row 相同辅甥，但是以相反的順序狡忙。
column: 靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣弓叛。
column-reverse: 與 column 相同彰居，但是以相反的順序。
flex-wrap 值介紹如下:
nowrap: flex容器為單行撰筷。該情況下flex子項(xiàng)可能會(huì)溢出容器陈惰。
wrap: flex容器為多行。該情況下flex子項(xiàng)溢出的部分會(huì)被放置到新行毕籽，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行抬闯。
wrap-reverse： 換行并第一行在下方
flex-flow值介紹如下(主軸方向和換行簡寫)：
<flex-direction>: 定義彈性盒子元素的排列方向
<flex-wrap>：控制flex容器是單行或者多行。
justify-content值介紹如下：
flex-start: 彈性盒子元素將向行起始位置對齊影钉。
flex-end: 彈性盒子元素將向行結(jié)束位置對齊画髓。
center: 彈性盒子元素將向行中間位置對齊。
space-between: 第一個(gè)元素的邊界與行的主起始位置的邊界對齊平委，同時(shí)最后一個(gè)元素的邊界與行的主結(jié)束位置的邊距對齊奈虾，
而剩余的伸縮盒項(xiàng)目則平均分布，并確保兩兩之間的空白空間相等。
space-around: 伸縮盒項(xiàng)目則平均分布肉微，并確保兩兩之間的空白空間相等匾鸥，同時(shí)第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半。
align-items值介紹如下:
flex-start: 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界碉纳。
flex-end: 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界勿负。
center: 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸劳曹，則會(huì)向兩個(gè)方向溢出相同的長度）奴愉。
baseline: 如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效铁孵。其它情況下锭硼，該值將參與基線對齊。
stretch: 如果指定側(cè)軸大小的屬性值為'auto'蜕劝，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸檀头，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。
align-content值介紹如下:
flex-start: 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界岖沛。
flex-end: 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界暑始。
center: 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸婴削，則會(huì)向兩個(gè)方向溢出相同的長度）廊镜。
space-between: 第一行的側(cè)軸起始邊界緊靠住彈性盒容器的側(cè)軸起始內(nèi)容邊界，最后一行的側(cè)軸結(jié)束邊界緊靠住彈性盒容器的側(cè)軸結(jié)束內(nèi)容邊界唉俗，
剩余的行則按一定方式在彈性盒窗口中排列期升，以保持兩兩之間的空間相等。
space-around: 各行會(huì)按一定方式在彈性盒容器中排列互躬，以保持兩兩之間的空間相等，同時(shí)第一行前面及最后一行后面的空間是其他空間的一半颂郎。
stretch: 各行將會(huì)伸展以占用剩余的空間吼渡。如果剩余的空間是負(fù)數(shù)，該值等效于'flex-start'乓序。在其它情況下寺酪，剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸替劈。
三寄雀、子元素屬性
.item{
order: <integer>; /*排序：數(shù)值越小，越排前陨献，默認(rèn)為0*/
flex-grow: <number>; /* default 0 */
/*放大：默認(rèn)0（即如果有剩余空間也不放大盒犹，值為1則放大，2是1的雙倍大小，以此類推）*/
flex-shrink: <number>; /* default 1 */
/*縮屑卑颉：默認(rèn)1（如果空間不足則會(huì)縮小沮协，值為0不縮小）*/
flex-basis: <length> | auto; /* default auto */
/*固定大凶可：默認(rèn)為0慷暂，可以設(shè)置px值，也可以設(shè)置百分比大小*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /*flex-grow, flex-shrink 和 flex-basis的簡寫晨雳，默認(rèn)值為0 1 auto行瑞，*/
align-self: auto | flex-start | flex-end | center | baseline | stretch; /*單獨(dú)對齊方式：自動(dòng)（默認(rèn)） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 文本基線對齊*/}
}
