- 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'等效。其它情況下,該值將參與基線對齊。(靠上對齊)
作者:楊楊1314
鏈接:https://www.jianshu.com/p/d9373a86b748
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯繫作者獲得授權並註明出處。