阮一峰flex 佈局學習 總結  

優點/概念：

1. 優點為盒模型提供最大的靈活，任何容器都可指定。
2. 採用flex佈局的父元素（容器），所有子元素自動成為flex成員：
3. 容器內預設存在水平，垂直 兩個軸

4. 任何一個容器都可以指定為 Flex 佈局。

   .box{
     display: flex;
   }
   

   行內元素也可以使用 Flex 佈局。

   .box{
     display: inline-flex;
   }
   

   Webkit 核心的瀏覽器，必須加上-webkit字首。

   .box{
     display: -webkit-flex; /* Safari */
     display: flex;
   }
    
   

注意：設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。

容器的屬性

以下6個屬性設定在容器上

• flex-direction               元素對齊方向水平還是垂直
• flex-wrap                      是否換行，以及換行方式
• flex-flow                        以上兩種屬性的簡寫：預設值為row nowrap
• justify-content               水平方向上對齊方式
• align-items                    行元素的對齊方式
• align-content                垂直方向上對齊方式

如需單獨設定其中一個子元素：

     1、通過css子元素篩選器

 .pip:nth-of-type(2) {
      align-self: center;
}

例子：

<div class="third-face">
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
</div>

.third-face {
  display: flex;
  justify-content: space-between;
}
  
.third-face .pip:nth-of-type(2) {
  align-self: center;
}

.third-face .pip:nth-of-type(3) {
  align-self: flex-end;
}
 

效果：