css display:flex 屬性(彈性佈局的適配)

一：display:flex 佈局

display:flex 是一種佈局方式。它即可以應用於容器中，也可以應用於行內元素。是W3C提出的一種新的方案，可以簡便、完整、
響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持。

Flex是Flexible Box的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。設爲Flex佈局以後，子元素的float、clear
和vertical-align屬性將失效。

二：flex的六個屬性

①、flex-direction 容器內元素的排列方向(默認橫向排列)

1：flex-direction:row; 沿水平主軸讓元素從左向右排列

2：flex-direction:column; 讓元素沿垂直主軸從上到下垂直排列

3：flex-direction:row-reverse;沿水平主軸讓元素從右向左排列

②、flex-wrap 容器內元素的換行(默認不換行)

1：flex-wrap: nowrap; (默認)元素不換行,比如：一個div寬度100%，設置此屬性後，
   2個div寬度就自動變成各50%；
2：flex-wrap: wrap; 元素換行,比如：一個div寬度100%，設置此屬性，第二個div就在第二行了；

③、justify-content 元素在主軸（頁面）上的排列

1：justify-content : center;元素在主軸（頁面）上居中排列

2：justify-content : flex-start;元素在主軸（頁面）上由左或者上開始排列

3：justify-content : flex-end;元素在主軸（頁面）上由右或者下開始排列

4：justify-content : space-between;元素在主軸（頁面）上左右兩端或者上下兩端開始排列

5：justify-content : space-around;每個元素兩側的間隔相等。所以，元素之間的間隔比元素與邊框的間隔大一倍。

④、align-items 元素在主軸（頁面）當前行的橫軸（縱軸）方向上的對齊方式

1：align-items : flex-start; 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界（靠上對齊）。

2：align-items : flex-end; 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。（靠下對齊）

3：align-items : center; 彈性盒子元素在該行的側軸（縱軸）上居中放置。（居中對齊）

4：align-items : baseline; 如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。（靠上對齊）

⑤、align-content 在彈性容器內的元素沒有佔用交叉軸上所有可用的空間時對齊容器內的各項（垂直）

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>

#main {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: flex-start;
}
#main div {
  width: 70px;
  height: 70px;
}

1：align-content: flex-start; 元素位於容器的開頭。各行向彈性盒容器的起始位置堆疊。

2:align-content: flex-end; 元素位於容器的結尾。各行向彈性盒容器的結尾位置堆疊。

3:align-content:center; 元素位於容器的中心。各行向彈性盒容器的中間位置堆疊。

4:align-content:stretch ; 默認值。元素被拉伸以適應容器。各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於'flex-start'。

5:align-content: space-between;元素位於各行之間留有空白的容器內。各行在彈性盒容器中平均分佈。

6:align-content: space-around;元素位於各行之前、之間、之後都留有空白的容器內。各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。

⑥、

flex常見屬性總結

 

Positional alignment
justify-content: center; :居中排列
justify-content: flex-start; /* 從行首起始位置開始排列 /
justify-content: flex-end; / 從行尾位置開始排列 */

作者：楊楊1314
鏈接：https://www.jianshu.com/p/d9373a86b748/
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。