css中的flex布局

flex布局為「彈性盒布局」，用彈性布局的方式有極大的靈活性，任何元素都可以使用flex布局，不管是行內元素或者是快級元素任何乙個容器都可以作為flex布局。

.box

flex-direction：row | row-reverse |column |column-reverse; 

2、子元素的換行方式，不換行 | 正向換行 | 反向換行。

flex-wrap：nowrap | wrap |wrap-reverse;

3、flex-direction和flex簡寫形式。

flex-flow：flex-direction屬性 flex-wrap屬性。

4、專案在主軸上的對齊方式。主軸開始的方向對齊 | 結束的方向對齊 | 居中對齊 | 兩邊不留間距，中間等距對齊 | 每乙個子元素兩邊留同樣的邊距對齊，邊距不互相抵消。

justify-content：flex-start | flex-end | center | space-between | space-around;

5、交叉軸(和主軸垂直交叉的軸)上如何對齊方式。交叉軸頭部對齊 | 交叉軸尾部對齊 | 交叉軸中間 | 基線對齊 | 交叉軸撐滿對齊；

align-items：flex-start | flex-end | center | baseline | stretch;

6、多根軸線的對齊方式 (多軸才有作用，否則該屬性不起作用)。交叉軸的開始方向 | 交叉軸結束的方向對齊 | 交叉軸中心對齊 | 兩端對齊，間隔平分 | 兩端對齊，邊上留有間距 | 整體充滿

align-content：flex-start | flex-end | center | space-between | space-around | stretch;

1、排列順序；數值越小越靠前。預設為0；數值一樣時，按原有序列排序。

order：number;

2、放大比例，預設為0；

flex-grow：number;

3、縮小比例，預設為1

flex-shrink:number;

4、在分配多餘空間之前，專案佔據的主軸空間；預設值為auto；

flex-basis：auto;

flex：1；

6、align-self屬性，覆蓋align-items屬性，與其他兄弟元素不一樣的對齊方式。除了auto，其他的屬性與align-items屬性相同。

align-self：auto | flex-start | flex-end | center | baseline | stretch;

選單右邊內容
頭部內容
左側內容
右側內容

CSS中的flex（彈性布局）

父標籤 display flex flex direction row row reverse 橫向 起點方向 rolumn rolumn reverse 縱向 flex wrap nowrap wrap wrap reverse 換 況 flex flow direction 與 wrap 結合 ...

css布局之flex布局

網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...

CSS中的flex和grid布局

flex布局 flex布局是彈性布局，用來為盒模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。但是，設定為flex布局後，子元素的float，clear，vertical align屬性都會失效。我們對於採用flex布局的元素，稱為容器，對於子元素，稱為專案。布局原理 通過給父盒子新增f...