HTML5基礎加強css樣式篇（伸縮容器屬性：flex-direction， flex-wrap，flex-flow，align-items，align-content）（五十三）
阿新 • • 發佈：2018-12-31
1.justify-content 屬性詳見（五十二）
2.flex-direction:row || row-reverse || column || column-reverse //設定主軸的方向
row:預設：
row 反向設定主軸方向：
column :主軸方向設定為縱軸方向（縱軸的方向為原來橫軸的正方向）；
column-reverse:主軸方向設定為縱軸方向的反方向（縱軸的方向為原來橫軸的正方向）
測試程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .layout-box { width: 600px; height: 300px; background-color: #f0f0f0; /*宣告一個元素為伸縮盒模型，伸縮容器 1.伸縮專案 沿主軸排列（start -> end） 2.所有的伸縮專案（子元素）與父元素等高。 3.伸縮專案自動升級為塊元素。 */ display: flex; /*主軸方向對主軸對齊的影響 預設值 flex-direction: row*/ flex-direction: row; /*反向設定主軸*/ flex-direction: row-reverse; /* justify-content: flex-end; justify-content: center; justify-content: space-around; justify-content: space-between;*/ /*主軸縱向*/ /*flex-direction: column;*/ /*justify-content: flex-end;*/ /*justify-content: center;*/ /*justify-content: space-around;*/ /*justify-content: space-between;*/ flex-direction: column-reverse; justify-content: flex-end; align-items: flex-end; /*justify-content: center;*/ /*justify-content: space-between;*/ } .item { } .item1 { background-color: #f00;} .item2 { background-color: #ff0; } .item3 { background-color: #00f;} .item4 { background-color: #f0f;} </style> </head> <body> <div class="layout-box"> <div class="item item1">1</div> <div class="item item2">222</div> <div class="item item3">3</div> <div class="item item4">4</div> </div> <script type="text/javascript"> </script> </body> </html>
3.flex-wrap：nowrap || wrap || wrap-reverse//伸縮容器對伸縮專案的包裹,當為伸縮專案設定寬度（或者高度）會造成伸縮專案沿主軸空間不足時設定
nowrap:：預設當伸縮容器主軸方向空間不足，壓縮伸縮專案，但不會換行
wrap：當伸縮容器主軸方向空間不足，換行顯示 1.換行後，行高等於 容器的高度/行數 2.預設，側軸拉伸基於行高。
wrap-reverse：側軸 start 與 end 對調；
測試程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .layout-box { width: 600px; height: 300px; background-color: #f0f0f0; display: flex; /* 伸縮容器對伸縮專案的包裹 當為伸縮專案設定寬度（或者高度）會造成伸縮專案沿主軸空間不足 預設：當伸縮容器主軸方向空間不足，壓縮伸縮專案，但不會換行 flex-wrap: nowrap; */ flex-wrap: nowrap; /* 當伸縮容器主軸方向空間不足，換行顯示 1.換行後，行高等於 容器的高度/行數 2.預設，側軸拉伸基於行高。 */ flex-wrap: wrap; /*側軸 start 與 end 對調*/ flex-wrap: wrap-reverse; flex-direction: column; align-items: flex-start; } .item { width: 250px} .item1 { background-color: #f00;} .item2 { background-color: #ff0; } .item3 { background-color: #00f; } .item4 { background-color: #f0f;} </style> </head> <body> <div class="layout-box"> <div class="item item1">1</div> <div class="item item2">222</div> <div class="item item3">3</div> <div class="item item4">4</div> </div> <script type="text/javascript"> </script> </body> </html>
4.flex-flow:row nowrap;//屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
5.align-items: flex-start | flex-end | center | stretch|baseline;//屬性定義專案在側軸(交叉軸)上如何對齊。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
測試程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .layout-box { width: 600px; height: 300px; background-color: #f0f0f0; display: flex; /*側軸對齊 預設值 align-items: stretch; 沿側軸拉伸伸縮專案與伸縮容器一致*/ align-items: stretch; align-items: flex-start; align-items: flex-end; align-items: center; /*基線對齊 伸縮專案沿著一行中，伸縮專案基線最大（行高或者字型最大的）的基線作為其對齊依據。 */ align-items: baseline; } .item { } .item1 { background-color: #f00;} .item2 { background-color: #ff0; } .item3 { background-color: #00f; font-size: 72px;} .item4 { background-color: #f0f;} </style> </head> <body> <div class="layout-box"> <div class="item item1">1</div> <div class="item item2">222</div> <div class="item item3">3</div> <div class="item item4">4</div> </div> <script type="text/javascript"> </script> </body> </html>
6.align-content: flex-start | flex-end | center | space-between | space-around | stretch;//屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
測試程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.layout-box {
width: 800px;
height: 300px;
background-color: #f0f0f0;
display: flex;
/* 當伸縮容器主軸方向空間不足，換行顯示
1.換行後，行高等於 容器的高度/行數
2.預設，側軸拉伸基於行高。
*/
flex-wrap: wrap;
/*justify-content: flex-end;*/
/*當出現多行時，align-items 是基於行的 start -> end 對齊*/
/*align-items: flex-start;*/
/*當出現多行時，配合 align-content 屬性一起使用，實現在伸縮容器側軸方向對齊*/
align-content: flex-start;
align-content: center;
align-content: flex-end;
/*讓多行在側軸均勻分佈*/
align-content: space-between;
align-content: space-around;
}
.item { width: 300px}
.item1 { background-color: #f00;}
.item2 { background-color: #ff0; }
.item3 { background-color: #00f; }
.item4 { background-color: #f0f;}
</style>
</head>
<body>
<div class="layout-box">
<div class="item item1">1</div>
<div class="item item2">222</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>