css display:flex 屬性

時間 2019-11-29

標籤 css display flex 屬性欄目 CSS 简体版

原文原文鏈接

一：display:flex 佈局

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

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

二：flex的六個屬性

flex-direction 容器內元素的排列方向(默認橫向排列)
1：flex-direction:row; 沿水平主軸讓元素從左向右排列

1536039075.png

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

1536039314(1).png

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

1536039460(1).png
flex-wrap 容器內元素的換行(默認不換行)
1：flex-wrap: nowrap; (默認)元素不換行,好比：一個div寬度100%，設置此屬性，2個div寬度就自動變成各50%；
2：flex-wrap: wrap; 元素換行,好比：一個div寬度100%，設置此屬性，第二個div就在第二行了；
justify-content 元素在主軸（頁面）上的排列
1：justify-content : center;元素在主軸（頁面）上居中排列

1536041764(1).png

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

1536041631(1).png

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

1536042053(1).png

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

1536042390(1).png

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

1536042636(1).png
align-items 元素在主軸（頁面）當前行的橫軸（縱軸）方向上的對齊方式
1：align-items : flex-start; 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界（靠上對齊）。

1536043107(1).png

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

1536043238(1).png

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

1536043373(1).png

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; }