1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 13 ul{ 14 width: 200px; 15 height: 500px; 16 border: 4px red solid; 17 18 margin: 0 auto; 19 20 /* 設置彈性容器 */ 21 display: flex; 22 23 /* 設置容器主軸和側軸 */ 24 /* flex-direction: column; 25 flex-wrap: wrap; */ 26 27 flex-flow: row wrap; 28 29 /* 30 justify-content 設置元素在主軸上的對齊方式 31 flex-start 默認值 彈性項沿着主軸起邊對齊 32 flex-end 彈性項沿着主軸終邊對齊 33 center 彈性項沿着主軸居中對齊 34 space-around 空白空間平均分配到每一個元素的兩側 35 space-evenly 將空白空間分配到元素的一側 36 space-between 將空白空間分配到兩個元素之間 37 38 39 40 */ 41 justify-content: flex-start ; 42 43 44 /* align-items 45 - 設置側軸上元素的對齊方式 46 - 可選值： 47 stretch ，默認值 輔軸上的元素將會被拉伸為相同的高度 48 flex-start 使元素沿着輔軸的起邊對齊 49 flex-end 使元素沿着輔軸的終邊對齊 50 center 使元素沿着輔軸的中間對齊 51 */ 52 align-items: flex-end; 53 54 /* 55 align-content: ; 56 - 用來設置側軸上空白空間的分布 57 - 可選值： 58 space-around 59 space-between 60 space-evenly 61 */ 62 /* align-content: space-evenly; */ 63 } 64 65 ul li{ 66 width: 100px; 67 height: 150px; 68 font-size: 50px; 69 color: #fff; 70 71 /* 72 元素的縮減系數越大，本身大小越大，縮減的越多 73 */ 74 /* flex-shrink:1; */ 75 76 /* flex-grow: 10; */ 77 } 78 79 li:nth-child(1){ 80 background-color: orange; 81 82 font-size: 80px; 83 84 /* 85 align-self 彈性元素的屬性 86 - 和 align-items作用一樣，值也一樣， 87 不同點在於self用於單獨設置某個元素的對齊方式 88 */ 89 /* align-self: stretch; */ 90 91 } 92 93 li:nth-child(2){ 94 background-color: pink; 95 } 96 97 li:nth-child(3){ 98 background-color: #bfa; 99 } 100 101 li:nth-child(4){ 102 background-color: #00FFFF; 103 } 104 105 </style> 106 </head> 107 <body> 108 109 <ul> 110 <li>1</li> 111 <li>2</li> 112 <li>3</li> 113 <li>4</li> 114 </ul> 115 116 </body> 117 </html>
效果
內容；副軸終邊對齊方式
1.父元素ul設置了flex,高度height: 500px;，也換行了，此時父元素的高度空間被分配為兩行。
2.父元素ul設置，flex-flow: row wrap; align-items: flex-end;側軸對齊方式為終邊對齊，側軸由上到下換行，此時對於，子項的起邊和終邊如圖所示
內容；主軸終邊對齊方式
1.父元素設置justify-content: flex-end ， 沒有自動空間分配，子項元素是緊緊排列的。