是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?br>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的子元素進(jìn)行排列彤路、對(duì)齊和分配空白空間破停。
一.容器屬性
flex-direction 屬性指定了彈性子元素在父容器中的位置茎杂。
flex-direction: row | row-reverse | column | column-reverse
justify-content:彈性項(xiàng)沿著彈性容器的主軸線（橫軸X）對(duì)齊
justify-content: flex-start | flex-end | center | space-between | space-around
align-items:設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸y）方向上的對(duì)齊方式希俩。
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap:屬性用于指定彈性盒子的子元素?fù)Q行方式棚贾。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
align-content 屬性用于修改 flex-wrap 屬性的行為狞洋。類似于 align-items, 但它不是設(shè)置彈性子元素的對(duì)齊弯淘，而是設(shè)置各個(gè)行的對(duì)齊。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
二.項(xiàng)目屬性
align-self 屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式吉懊÷龋可覆蓋align-items屬性。
align-self: auto | flex-start | flex-end | center | baseline | stretch
flex 屬性用于指定彈性子元素如何分配空間借嗽。
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
order 屬性設(shè)置彈性容器內(nèi)彈性子元素的屬性:
order:<integer>：用整數(shù)值來定義排列順序态鳖，數(shù)值小的排在前面《竦迹可以為負(fù)值浆竭。
flex-grow 默認(rèn)為0；屬性用于設(shè)置項(xiàng)目的放大比例（分配剩余空間）甲锡；所有項(xiàng)目的flex-grow：1兆蕉，則它們將等分剩余空間
flex-grow: <number>;
flex-shrink 默認(rèn)為1，屬性用于設(shè)置項(xiàng)目的縮小比例（處理溢出空間）缤沦；一個(gè)項(xiàng)目的flex-shrink：0虎韵，則空間不足時(shí)，該項(xiàng)目不縮小
flex-shrink: <number>;
flex-basis 默認(rèn)值：auto缸废，屬性定義了分配多余空間之前包蓝，項(xiàng)目占據(jù)的主軸空間驶社；
瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間测萎。
flex-basis屬性設(shè)置固定值（例如：350px）亡电，則項(xiàng)目將占據(jù)固定空間。(類似定寬度)
flex-basis: <length> | auto;
