前言

彈性布局是新一代的布局方式，傳統布局中使用浮動布局會給我們帶來不少弊端，如CSS代碼高度依賴于HTML代碼結構等等，下面我將用幾個例子讓大家快速學會彈性布局。

PS：彈性布局適用于較簡單的場景，過于復雜的場景可以嘗試著使用CSS3的Grid布局，彈性布局在PC端中還存在兼容性問題，移動端中無兼容性問題，可以放心使用。

1.容器屬性

css3為新增的彈性布局提供了多個屬性，分別為彈性盒模型的容器屬性，以及彈性盒子中子元素的子元素屬性。

1.1display

css3中為display新增了兩個屬性值，分別為flex、inline-flex

display:flex;           /*將容器聲明為一個彈性盒模型且容器表現為塊級元素*/display:inline-flex;    /*將容器聲明為一個彈性盒模型且容器表現為行內元素*/

容器display:block;

容器display:flex;

此時彈性盒模型內的子元素變得類似浮動后的布局，這里要引入彈性盒模型中兩條重要的軸線，分別為主軸和垂直軸，如下圖所示，彈性盒模型內的子元素默認按照主軸的方向排列。

1.2flex-direction

flex-direction可以設置主軸的方向，默認值為row。

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

理解兩條軸線至關重要，搞定軸線之后后面就是簡單的使用屬性了。

1.3flex-wrap

.box {    width:500px;    height:500px;    margin:100px auto 0 auto;    background: #eee;    display: flex;    flex-direction: row;}.box-item {    width:200px;    height:200px;    line-height:200px;    text-align: center;    color:#fff;    font-size:20px;}

從上面可以看出容器的寬高都是500px,子元素的寬高都是200px，那如果我們一行放3個元素，元素會像浮動布局那樣換行嗎？

并沒有，同時我們發現了，現在一個子元素的寬度只有166.66px，三個子元素沒有換行同時自動等比例縮放至放好可以在容器中放下。 flex-wrap就是控制彈性盒模型的子元素換行方式的，默認值為nowrap。

flex-wrap：nowrap | wrap | wrap-reverse

• flex-wrap：nowrap; /*不換行，等比例縮小*/
• flex-wrap：wrap; /*自動換行*/
• flex-wrap：wrap-reverse; /*自動反方向換行，往下換行變成往上換行*/

1.4justify-content

justify-content控制主軸的對齊方式，默認向主軸開始起點位置對齊，值為flex-start。

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

• justify-content：flex-start; /*向主軸開始位置對齊*/
• justify-content：flex-end; /*向主軸結束位置對齊*/
• justify-content：center; /*主軸居中對齊*/
• justify-content：space-between; /*等間距對齊，兩端不留空*/
• justify-content：space-around; /*等間距對齊，兩端留空，每個元素左間距與右間距大小相等,具體見下圖*/

1.5align-items

align-items控制垂直軸的對齊方式，默認向主軸開始起點位置對齊，值為flex-start。

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

• align-items：flex-start; /*向垂直軸開始位置對齊*/
• align-items：flex-end; /*向垂直軸結束位置對齊*/
• align-items：center; /*垂直軸居中對齊*/
• align-items：baseline; /*文本基線對齊，用的不多*/
• align-items：stretch; /*垂直軸方向上的height/width若值為auto，則自動填滿，但依然受到min/max-width/height的控制。不設置彈性盒模型時，height默認值為內容區大小，若設置為彈性盒模型且align-items設置為stretch，則高度占滿整個父容器*/

1.6align-content

剛剛說完了垂直軸只有一個元素的情況，若垂直軸有兩個元素時，align-items還能起作用嗎？ 為了使垂直軸存在兩個元素，我們首先設置自動換行

flex-wrap:wrap;

從圖中可以看到，這不是我們想要的效果，我們想要的效果是垂直軸方向上的兩個元素緊貼著的。

這時我們要用align-content。 align-content：flex-start | flex-end | center | space-between | space-around

• align-content：flex-start; /*向主軸開始位置對齊*/
• align-content：flex-end; /*向主軸結束位置對齊*/
• align-content：center; /*主軸居中對齊*/
• align-content：space-between; /*等間距對齊，兩端不留空*/
• align-content：space-around; /*等間距對齊，兩端留空，每個元素上間距與下間距大小相等,具體見下圖*/

垂直軸只有一行元素時使用align-items屬性，有多行元素時使用align-content屬性。

2.子元素屬性

2.1order

order屬性可用于設置子元素的位置，order的值越小排在越前面，默認值為0，可以設置負值。

//設置第三個子元素的order為-1.box-item3 {	background: green;	order:-1;}

通過為每一個子元素設置order值可以使得布局不依賴于html的結構。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。