flex布局已經(jīng)是前端中常用的一種布局方式了，目前現(xiàn)代瀏覽器的支持也不錯（IE較差）

各瀏覽器支持程度.png

• Flex布局外層父容器稱為Flex容器（flex container），簡稱”容器”
• 它的所有子元素自動成為容器成員祟绊，稱為Flex項目（flex item）甚牲，簡稱”項目”镶苞。
• 子元素在父元素的主軸上排列陕靠，主軸為父元素的橫向或縱向迂尝，可以自己定義
  示意圖（來源：http://www.runoob.com/w3cnote/flex-grammar.html）：
  
  flex布局概念.png

理解完上面的概念后脱茉，我們通過在一個容器中試驗相關(guān)屬性來掌握flex布局
先畫一個大框作為容器

原始圖.png

接下來就在這個容器里各種試驗

1. 先給大容器增加一個display: flex;

<div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

#container {
    width: 1000px;
    height: 600px;
    border: 1px solid crimson;
    margin-left: 100px;
    display: flex;  
}
.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

容器添加display:flex屬性.png

目前一切正常
接下來給容器添加一些屬性

2. flex-direction

• flex-direction: row
  
  容器添加flex-direction屬性.png
• flex-direction: row-reverse
  
  容器添加flex-direction: row-reverse屬性.png
• flex-direction: column
  
  容器添加flex-direction: column屬性.png
• flex-direction: column-reverse
  
  容器添加flex-direction: column-reverse屬性.png

3. flex-wrap

• flex-wrap: nowrap
  這樣會強制不換行，每個子元素會被壓縮

#container {
  width: 1000px;
  height: 600px;
  border: 1px solid crimson;
  margin-left: 100px;
  display: flex;
  flex-wrap: nowrap;
}
.box {
  width: 300px;
  height: 100px;
  background-color: yellow;
}

容器添加flex-wrap: nowrap屬性.png

• flex-wrap: wrap
  
  容器添加flex-wrap: wrap屬性.png

4. justify-content
   搞明白子元素的排序垄开，接下來看怎么控制每個子元素的對齊情況

• justify-content: flex-start
  
  容器添加justify-content: flex-start屬性.png
• justify-content: flex-end
  
  容器添加justify-content: flex-end屬性.png
• justify-content: space-around
  
  容器添加justify-content: space-around屬性.png
• justify-content: space-between
  
  容器添加justify-content: space-between屬性.png

5. align-items

• align-items: center
  
  容器添加align-items: center屬性.png
• align-items: flex-end
  
  容器添加align-items: flex-end屬性.png

6. align-content
   除了控制單個子元素的相對位置琴许，所有軸線的相對位置也可控

• align-content: flex-end
  
  容器添加align-content: flex-end屬性.png
• align-content: center
  
  容器添加align-content: center屬性.png
  
  容器屬性說完了，再來研究一下元素屬性

7. order
order控制子元素的優(yōu)先級

  #box1 {
    order: 100;
  }

子元素添加order屬性.png

8. flex-grow/flex-shrink
flex-grow/flex-shrink控制子元素的大小溉躲，在空間足夠的情況下會按數(shù)字比例擴(kuò)大/縮小

#box1 {
  flex-grow: 2;
  background-color: coral;
}

子元素添加flex-grow屬性.png

9. flex-basis
flex-basis控制單個子元素在主軸占據(jù)空間的大小

.box {
  width: 300px;
  height: 100px;
  background-color: yellow;
}
#box1 {
  flex-basis: 100px;
  background-color: coral;
}

子元素添加flex-basis屬性.png

10. align-self
align-self可以控制單個子元素在主軸上的對齊位置
    
    子元素添加align-self: flex-end屬性.png
    
    
    子元素添加align-self: center屬性.png

至此虚吟，flex布局就全部介紹完了，完全理解這些屬性后靈活搭配它們就可以在頁面布局中使用啦签财。