1.html代碼
1 <div class="box"> 2 <div class="first">1</div> 3 <div class="second">2</div> 4 <div class="third">3</div> 5 <div class="fourth">4</div> 6 <div class="fifth">5</div> 7 </div>
2.justify-content:屬性：設置子元素的排列方式
1 <style> 2 .box{ 3 width: 1000px; 4 height: 200px; 5 border: 1px solid red; 6 box-sizing: border-box; 7 /*設置為父容器為盒子：會使每一個子元素自動變成伸縮項*/ 8 display: flex; 9 /*設置子元素的排列方式*/ 10 /*flex-start：讓子元素從父容器的起始位置開始排列 11 flex-end：讓子元素從父容器的結束位置開始排列 12 center：讓子元素從父容器的中間位置開始排列 13 space-between：左右對其父容器的開始和結尾，中間平均分頁，產生相同過的間距 14 space-around：將多余的空間平均的分頁在給每一個子元素的兩邊 margin：0 auto ：造成中間合資的間距是左右兩邊盒子間距的兩倍 15 space-evenly：使子元素平均分布在把父容器中，且間距相同 16 */ 17 justify-content: space-evenly; 18 } 19 .box > div{ 20 width: 200px; 21 height: 100%; 22 } 23 .first{ 24 width: 200px; 25 height: 100%; 26 background-color: #65ffdd; 27 } 28 .second{ 29 background-color: #5aff61; 30 } 31 .third{ 32 background-color: #efffc7; 33 } 34 .fourth{ 35 background-color: #47b3ff; 36 } 37 </style>
效果圖：
3.flex-flow:屬性：可以代替 flex-wrap和flex-direction
1 <style> 2 .box{ 3 width: 900px; 4 height: 600px; 5 border: 1px solid red; 6 box-sizing: border-box; 7 margin: 0 auto; 8 /*設置父容器為盒子：會使每個子元素自動變成伸縮項 9 當子元素的寬高和大於父容器寬度的時候，子元素就自動平均收縮*/ 10 11 display: flex; 12 /*設置子元素在主軸上的排列方式*/ 13 justify-content: space-evenly; 14 /* flex-wrap：控制子元素是否換行顯示，默認不換行 15 noweap：不換行---則收縮 16 wrap：換行顯示 17 wrap-reverse：翻轉 18 */ 19 /*flex-wrap: wrap;*/ 20 /*flex-direction:設置子元素的排列方向：就是用來設置主軸方向，默認主軸方向是row 21 row水平 22 column：垂直*/ 23 /*flex-direction: column-reverse;*/ 24 25 /*flex-flow:可以代替 flex-wrap和flex-direction*/ 26 flex-flow: column wrap; 27 } 28 .first{ 29 width: 200px; 30 height: 200px; 31 background-color: #65ffdd; 32 } 33 .second{ 34 width: 200px; 35 height: 200px; 36 background-color: #5aff61; 37 } 38 .third{ 39 width: 200px; 40 height: 200px; 41 background-color: #efffc7; 42 } 43 .fourth{ 44 width: 200px; 45 height: 200px; 46 background-color: #47b3ff; 47 } 48 .fifth{ 49 width: 200px; 50 height: 200px; 51 background-color: #ff510a; 52 } 53 </style>
效果圖：
4.flex-grow:屬性：可以來擴張子元素的寬度：設置當前元素應該占據生於空間的比例值，比例值計算：當前空間的flex-grow/所有兄弟元素的flex-grow的和
1 <style> 2 .box { 3 width: 900px; 4 height: 600px; 5 border: 1px solid red; 6 margin: 0 auto; 7 /*設置父容器為盒子：會使每個子元素自動變成伸縮項 8 當子元素的寬高和大於父容器寬度的時候，子元素就自動平均收縮*/ 9 10 display: flex; 11 /*設置子元素在主軸上的排列方式*/ 12 justify-content: space-evenly; 13 14 15 } 16 .first{ 17 width: 200px; 18 height: 200px; 19 background-color: #65ffdd; 20 /*flex-grow: 可以來擴張子元素的寬度：設置當前元素應該占據生於空間的比例值， 21 比例值計算：當前空間的flex-grow/所有兄弟元素的flex-grow的和 22 flex-grow的默認值是0：說明子元素不會去占據生於的空間 23 */ 24 flex-grow: 1; 25 } 26 .second{ 27 width: 200px; 28 height: 200px; 29 background-color: #5aff61; 30 flex-grow: 1; 31 } 32 .third{ 33 width: 200px; 34 height: 200px; 35 background-color: #efffc7; 36 flex-grow: 1; 37 } 38 </style>
效果圖：
5.flex-shrink:屬性：定義收縮比例，通過設置的值來計算的收縮空間比例值計算：當前空間的flex-shrink/所有兄弟元素的flex-shrink的和。默認值為1
1 <style> 2 .box { 3 width: 500px; 4 height: 600px; 5 border: 1px solid red; 6 margin: 0 auto; 7 /*設置父容器為盒子：會使每個子元素自動變成伸縮項 8 當子元素的寬高和大於父容器寬度的時候，子元素就自動平均收縮*/ 9 display: flex; 10 /*設置子元素在主軸上的排列方式*/ 11 justify-content: space-evenly; 12 } 13 .first{ 14 width: 200px; 15 height: 200px; 16 background-color: #65ffdd; 17 /*flex-shrink:定義收縮比例，通過設置的值來計算的收縮空間 18 比例值計算：當前空間的flex-shrink/所有兄弟元素的flex-shrink的和 19 默認值為1 20 */ 21 flex-shrink: 2; 22 } 23 .second{ 24 width: 200px; 25 height: 200px; 26 background-color: #5aff61; 27 flex-shrink: 0; 28 } 29 .third{ 30 width: 200px; 31 height: 200px; 32 background-color: #efffc7; 33 34 } 35 </style>
效果圖：
6.flex:屬性：設置當前伸縮子項占據生於空間的比例值
1 <style> 2 .box { 3 width: 100%; 4 height: 500px; 5 background-color: #ccc; 6 margin: 0 auto; 7 /*設置父容器為盒子：會使每個子元素自動變成伸縮項 8 當子元素的寬高和大於父容器寬度的時候，子元素就自動平均收縮*/ 9 10 display: flex; 11 /*設置子元素在主軸上的排列方式*/ 12 /*justify-content: space-evenly;*/ 13 } 14 .first{ 15 /*設置當前伸縮子項占據生於空間的比例值*/ 16 flex: 1; 17 height: 100%; 18 background-color: #65ffdd; 19 } 20 .second{ 21 flex: 4; 22 height: 100%; 23 background-color: #5aff61; 24 } 25 </style>
效果圖：
7.align-items：屬性：設置子元素在側軸方向上的對其方式
1 <style> 2 .box{ 3 width: 900px; 4 height: 600px; 5 border: 1px solid red; 6 margin: 0 auto; 7 /*設置父容器為盒子：會使每個子元素自動變成伸縮項 8 當子元素的寬高和大於父容器寬度的時候，子元素就自動平均收縮*/ 9 10 display: flex; 11 /*align-items：設置子元素在側軸方向上的對其方式 12 center：設置在側軸方向上居中對齊 13 flex-start：設置在側軸方向上頂對其 14 flex-end：設置在側軸方向上低對齊 15 stretch：拉伸 ：讓我的子元素在側軸方向上盡享拉伸，填充滿整個側軸方向 16 baseline：文本基線對齊 17 */ 18 align-items: center; 19 } 20 .first{ 21 width: 200px; 22 height: 200px; 23 background-color: #65ffdd; 24 } 25 .second{ 26 width: 200px; 27 height: 200px; 28 background-color: #5aff61; 29 /*設置單個元素在側軸方向上的對齊方式*/ 30 align-self: flex-end; 31 } 32 .third{ 33 width: 200px; 34 height: 200px; 35 background-color: #efffc7; 36 } 37 38 </style>
效果圖：
