CSS中的flex布局

1、flex 布局的概念

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局，行內元素也可以通過 inline-flex 使屬性值用 Flex 布局。

inline-flex 和 inline-block 一樣，對設置了該屬性值的元素的子元素來說是個 display:flex 的容器，對外部元素來說是個 inline 的塊。

.box{
  display: flex;
}
.inlinebox{
  display: inline-flex;
}

設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

下面將元素分為容器和子元素，設置了 display 屬性的即為容器，容器內部的元素即為子元素也稱為項目。

2、容器的屬性

設置了 flex 屬性的容器可以通過設置其他屬性值來設置容器的子元素的排列

以下6個屬性可以設置在容器上：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

2.1、flex-direction（設置子元素的排列方向）

flex-direction 屬性決定子元素的排列方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

<div class="test02">
    <div class="children">
      <p>1</p>
    </div>
    <div class="children">
      <p>2</p>
    </div>
    <div class="children"> 
      <p>3</p>
    </div>
</div>

.test02 {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
 }
.test02 .children{ 
   width: 50px; 
   height: 50px; 
}

row（默認值）：主軸為水平方向，起點在左端；

row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

        

2.2、flex-wrap屬性（設置是否換行）

 讓彈性盒的子元素在必要的時候拆行，當不設置該屬性值的話默認值是不換行的，如果容器裝不下子元素的話子元素會進行相應的收縮。有三個屬性值：

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默認）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。下面分別對應：

      

2.3、flex-flow 屬性（flex-direction和flex-wrap的結合）

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性，默認值為 row nowrap。當然，該屬性也可以只設置其中一個屬性值。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

2.4、justify-content屬性（設置子元素在橫軸上的排列）

 justify-content 屬性定義了子元素在橫軸上的對齊方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默認值）：左對齊；　　　　

flex-end：右對齊；　　　　　　　　　　

center： 居中；　　　　　　　　　　

space-between：兩端對齊，項目之間的間隔都相等；

        

space-around：每個子元素之間的間隔相等，且子元素之間的間隔比子元素與父元素的距離大一倍。

 

 2.5、align-items屬性（設置子元素在縱軸上的排列）

align-items 屬性定義項目在縱軸上是如何排列的

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉軸的起點對齊。　　　　 

flex-end：交叉軸的終點對齊。　　　　   

center：交叉軸的中點對齊。　　　　　　

     

baseline: 項目的第一行文字的基線對齊。

 

stretch（默認值）：如果子元素未設置高度 height 或設為auto，將占滿整個容器的高度。如果子元素設置了寬度，則該屬性值無效

 

2.6、align-content屬性（設置每行子元素之間的排列方式）

align-content 屬性定義了當有多行子元素時每行子元素之間排列方式，當只有一行子元素時即flex-wrap屬性值為no-wrap時，該屬性沒有效果。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

stretch（默認值）：每行子元素默認排列，相當於只設置了lex-wrap:wrap，每行子元素間有一定間隔

flex-start：子元素從縱軸的起點開始排列，且行間沒有間距     

flex-end：與縱軸的終點對齊，且行間沒有間距。　

center：與縱軸的中點對齊。　　　　     

      

space-between：與縱軸兩端對齊，軸線之間的間隔平均分布。

space-around：每行子元素的間隔都相等，且每行子元素之間的間隔比子元素到父元素的距離大一倍。

                                                                                                         

 3、子元素的屬性

 子元素有以下6個屬性：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

 3.1、order 屬性（設置某個子元素的排列先后順序）

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

.item {
  order: <integer>;
}

 下面我是把第四個子元素的 order 設為了 -1

3.2、flex-grow屬性（設置子元素的放大比例，默認為0）

flex-grow屬性定義項目的放大比例，該屬性值默認為0，即即使存在剩余空間，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

默認值效果：

比如如果所有項目的flex-grow屬性都為1，則如果有剩余空間的話它們將等分剩余空間。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。下面是把第一和第三個元素設為1，第二個設為2：

3.3、flex-shrink屬性（設置子元素的縮小比例，默認為1）

flex-shrink屬性定義了子元素的縮小比例，默認為1，即默認是如果父元素裝不下子元素，如果不換行的話那么子元素都按照一樣的比例縮小。該屬性取負值無效。

.item {
  flex-shrink: <number>; /* default 1 */
}

比如如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。下面是默認情況下，我把三個子元素的寬都設為100，而父元素只有200的寬，此時三個子元素都按照一樣的比例縮小：

如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。下面我是把第一個子元素的flex-shrink值設為了0，所以它縮小比例為0，即不縮小。

3.4、flex-basis屬性（設置子元素理想的寬度）

 flex-basis屬性的默認值為auto，即子元素的本來大小。

該屬性跟長度width差不多意義，可以設為一個長度值，定義了子元素初始占據的寬度。該屬性是設置子元素在被放進一個flex容器之前的大小，也就是子元素理想或假設的大小，但是flex-basis並不能保證其實際呈現的大小！

但當父元素裝不下子元素時，子元素會按照flex-shrink來進行相應比例的縮小，如果沒有設置flex-shrink默認情況下每個子元素的壓縮率都是一樣的。

當父元素有空余空間時，設置了flex-basis的子元素並不會自動擴大，而是保持flex-basis的屬性值設置的大小。

具體可參考：https://www.jianshu.com/p/17b1b445ecd4

.item {
  flex-basis: <length> | auto; /* default auto */
}

3.5、flex屬性（flex-grow、flex-shrink和flex-basis的組合）

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

3.6、align-self屬性（設置單個子元素的縱軸排列方式）

align-self屬性允許單個項目有與其他項目不一樣的縱軸排列方式，可覆蓋align-items屬性。

默認值為auto，即跟父元素設置的 align-items 的值指定的縱軸排列方式一樣。

該屬性可能取6個值，設置的值可覆蓋掉父元素設置的align-items指定的排列方式。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 下面父元素設置的 align-items 值為 flex-end，第二個元素單獨設置了 align-self 為center 。

 

4、flex 布局如何兼容低版本IE

低版本（IE10及以下）對 flex 布局有一些兼容問題，此時在父元素設置了 display: flex; 后，再給該父元素的子元素添加 float: left; 屬性值即可。

.parent{
  display: flex;
    
  .children{
      float: left;
}