CSS3 彈性佈局快速入門

前言

彈性佈局是新一代的佈局方式，傳統佈局中使用浮動佈局會給咱們帶來很多弊端，如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的結構。

3.小結

彈性佈局簡單易上手，使用熟練以後會發現只須要不多的代碼就能夠實現之前複雜的佈局，彈性佈局最重要的就是兩條軸線，這個必定要熟練掌握，不少屬性的方向都與兩條軸線有關。

4.交流

若是這篇文章幫到你了，以爲不錯的話來點個Star吧。 github.com/lizijie123