使用flex布局的容器（flex container），它內部的元素自動成為flex項目（flex item）。容器擁有兩根隱形的軸，水平的主軸（main axis），和豎直的交叉軸。主軸開始的位置，即主軸與右邊框的交點，稱為main start；主軸結束的位置稱為main end；交叉軸開始的位置稱為cross start；交叉軸結束的位置稱為cross end。item按主軸或交叉軸排列，item在主軸方向上占據的寬度稱為main size，在交叉軸方向上占據的寬度稱為cross size。

　　此外，需註意使用flex容器內元素，即flex item的float，clear、vertical-align屬性將失效。

1.flex-direction

　　　　決定主軸的方向，即項目排列的方向，有四個可能的值：row(默認)|row-reverse|column|column-reverse

　　　　row:主軸為水平方向，項目沿主軸從左至右排列

　　　　column：主軸為豎直方向，項目沿主軸從上至下排列

　　　　row-reverse：主軸水平，項目從右至左排列，與row反向

　　　　column-reverse：主軸豎直，項目從下至上排列，與column反向

如下代碼

<style>
 #container {
    display: flex; //
    height
 
:200px;
    width: 240px;
    flex-wrap: wrap;

默認情況下，item排列在一條線上，即主軸上，flex-wrap決定當排列不下時是否換行以及換行的方式，可能的值nowrap(默認)|wrap|wrap-reverse
　　　　nowrap：自動縮小項目，不換行
　　　　wrap：換行，且第一行在上方
　　　　wrap-reverse：換行，第一行在下面

    align-content: flex-start; 

　該屬性定義了當有多根主軸時，即item不止一行時，多行（所有行作為一個整體）在交叉軸（即非主軸）軸上的對齊方式。
 align-content可能值含義如下（假設主軸為水平方向）：
　　　　　　flex-start：左對齊
　　　　　　flex-end：右對齊
　　　　　　center：居中對齊
　　　　　　space- between：兩端對齊
　　　　　　space-around：沿軸線均勻分布
　　　　　　stretch： 默認值。各行將根據其flex-grow值伸展以充分占據剩余空間。當items設置了高度之後，設置為stretch，和center效果有點接近~~
 

    align-items: center;

　指定了當前Flex容器的每一行中的items項目在此行上在交叉軸上的對齊方式
  指定了每一行內items相對彼此自身的在交叉軸上的對齊方式。可能的值有flex-start|flex-end|center|baseline|stretch，當主軸水平時，其具體含義為 
　　　flex-start：當items設置了高度時的默認值。頂端對齊 
　　　flex-end：底部對齊 　
　　　center：豎直方向上居中對齊 　
　　　baseline：item第一行文字的底部對齊 　
　　　stretch：默認值。當item未設置高度時，item將和容器等高對齊。當item設置了高度時，設置strentch與flex-start的效果一樣。

    background-color: #8c8c8c;
    justify-content: center

決定多行item（把所有行作為一個整體）在主軸上的對齊方式，可能的值有flex-start（默認），flex-end，center，space-between，space-around。
當主軸沿水平方向時，具體含義為 　　　
　　　flex-start：左對齊 　　　
　　　flex-end：右對齊 　　
　　　center：居中對齊 　　
　　　space- between：兩端對齊
 　　space-around：沿軸線均勻分布

}
  
  div > div {
    border: 2px solid #8c8c8c;
    width: 50px;
  }
  
  #item1 {
    background-color: #8cffa0;
    height: 30px;
    width: 20px
  }
  
  #item2 {
    background-color: #a0c8ff;
   height: 50px;
   width: 30px;}
  
  #item3 {
    background-color: #ffa08c;
   height: 40px;
  }
  
  #item4 {
    background-color: #ffff8c;
   height: 60px;
  }
  
  #item5 {
    background-color: #ff8cff;
   height: 70px;
  }
  
  #item6 {
    background-color: #8cffff;
    height: 50px;
  } 
</style>

  <div id="container">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
    <div id="item4"></div>
    <div id="item5"></div>
    <div id="item6"></div>
    <div id="item4"></div> 
     <div id="item5"></div>
    <div id="item6"></div>
    <div id="item3"></div> 
  </div>

設置父容器：

#container {
    display: flex;
    height:200px;
    width: 240px;
    flex-wrap: wrap;
    align-content: flex-start; 
    align-items: center;
    background-color: #8c8c8c;
    justify-content: center
  }

效果如下：

設置父容器

#container {
    display: flex;
    height:200px;
    width: 240px;
    flex-wrap: wrap;
    align-content:center; 
    align-items: flex-start;
    background-color: #8c8c8c;
    justify-content: flex-end
  }

設置父容器

 #container {
    display: flex;
    height:200px;
    width: 240px;
    flex-wrap: wrap;
    align-content:center; 
    align-items: center;
    background-color: #8c8c8c;
    justify-content: center
  }

效果如下

對display:flex的理解