flex的概念最早是在2009年被提出，目的是提供一種更靈活的布局模型，使容器能(néng)通過改變裏面項目的高(gāo)寬、順序，來(lái)對(duì)可用(yòng)空(kōng)間實現(xiàn)最佳的填充，方便适配不同大(dà)小(xiǎo)的内容區(qū)域。
在不固定高(gāo)度信息的例子中，我們隻需要在容器中設置以下(xià)兩個屬性即可實現(xiàn)内容不确定下(xià)的垂直居中。
.container{
display: flex;
flex-direction: column;
justify-content: center;
}
flex不單是一個屬性，它包含了(le)一套新的屬性集。屬性集包括用(yòng)于設置容器，和(hé)用(yòng)于設置項目兩部分。
設置容器的屬性有：
display:flex;
flex-direction:row（默認值） | row-reverse | column |column-reverse
flex-wrap:nowrap（默認值） | wrap | wrap-reverse
justify-content:flex-start（默認值） | flex-end | center |space-between | space-around | space-evenly
align-items:stretch（默認值） | center | flex-end | baseline | flex-start
align-content:stretch（默認值） | flex-start | center |flex-end | space-between | space-around | space-evenly
設置項目的屬性有：
order:0（默認值） | <integer>
flex-shrink:1（默認值） | <number>
flex-grow:0（默認值） | <number>
flex-basis:auto（默認值） | <length>
flex:none | auto | @flex-grow @flex-shrink @flex-basis
align-self:auto（默認值） | flex-start | flex-end |center | baseline| stretch
在開(kāi)始介紹各個屬性之前，我們需要先明(míng)确一個坐(zuò)标軸。默認的情況下(xià)，水(shuǐ)平方向的是主軸（main axis），垂直方向的是交叉軸（cross axis）。
項目是在主軸上(shàng)排列，排滿後在交叉軸方向換行。需要注意的是，交叉軸垂直于主軸，它的方向取決于主軸方向。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發