flex布局也稱作彈性布局，隨著響應式的使用普通的浮動和定位有著局限性，而flex布局就是來解決這種局限性的。

任何一個元素都能使用flex布局，通過給父元素設(shè)置flex布局來控制子元素的位置和排列方式，同時子元素的float，clear和vertical-align屬性都將失效。通常給flex布局的的父元素設(shè)置屬性來控制具體的子元素的位置和排列方式，主要包括：

flex-direction：設(shè)置主軸的方向。

justify-content：設(shè)置主軸上的子元素排列方式。

flex-wrap：設(shè)置子元素是否換行。

align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）。

align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）。

flex-flow：復合屬性，相當于同時設(shè)置了 flex-direction 和 flex-wrap。

也可以設(shè)置子元素的屬性，例如：

order：指定了項目的排列順序。

flex-grow：定義了在有可用空間時的放大比例。

flex-shrink：定義了在空間不足時的縮小比例。

flex-basis：指定了項目在分配空間前的初始大小。

flex：這是flex-grow、flex-shrink和flex-basis的簡寫形式。

align-self：允許單個項目獨立于其他項目在交叉軸上對齊。

某個屬性之間能夠具體的設(shè)置不同的屬性值了更加具體的設(shè)置子元素的布局樣式，現(xiàn)在大部分的布局都采用的更加便捷的flex布局方法來滿足各種復雜的布局。