1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>展示伸縮項目align-self取不同值的效果</title> 5 <meta charset="UTF-8"/> 6 <link rel="stylesheet" href="css/demo1.css"/> 7 </head> 8 <body> 9 <div class="flex-container"> 10 <div>flex-start</div> 11 <div>flex-end</div> 12 <div>center</div> 13 <div>baseline</div> 14 <div>stretch</div> 15 </div> 16 </body> 17 </html>
1 *{ 2 margin:0; 3 padding:0; 4 } 5 .flex-container{ 6 border:1px solid hsla(120,30%,50%,0.8); 7 margin:50px; 8 background-color:hsla(10,80%,10%,0.2); 9 height:300px; 10 width:565px; 11 /*聲明伸縮容器*/ 12 display:flex; 13 -webkit-flex-flow:row wrap;/*設置伸縮流方向和換行*/ 14 -webkit-align-items:flex-start;/*todo? 設置伸縮項目在側軸的對齊方式*/ 15 align-items:flex-start;/*todo? */ 16 } 17 .flex-container>div{ 18 width:100px; 19 min-height:100px; 20 border:1px solid hsla(120,30%,50%,0.8); 21 margin:5px; 22 font-size:20px; 23 text-align:center; 24 line-height:100px; 25 color:#fff; 26 font-weight:bold; 27 } 28 .flex-container>div:nth-child(1){ 29 background-color:hsla(120,30%,50%,0.8); 30 -webkit-align-self:flex-start;/*設置伸縮項目自身在側軸的對齊方式*/ 31 align-self:flex-start; 32 } 33 .flex-container>div:nth-child(2){ 34 background-color:hsla(120,30%,10%,0.8); 35 -webkit-align-self:flex-end;/*設置伸縮項目自身在側軸的對齊方式*/ 36 align-self:flex-end; 37 } 38 .flex-container>div:nth-child(3){ 39 background-color:hsla(20,30%,50%,0.8); 40 -webkit-align-self:center;/*設置伸縮項目自身在側軸的對齊方式*/ 41 align-self:center; 42 } 43 .flex-container>div:nth-child(4){ 44 background-color:hsla(20,80%,50%,0.8); 45 -webkit-align-self:baseline;/*設置伸縮項目自身在側軸的對齊方式*/ 46 align-self:baseline; 47 } 48 .flex-container>div:nth-child(5){ 49 background-color:hsla(320,80%,50%,0.8); 50 -webkit-align-self:stretch;/*設置伸縮項目自身在側軸的對齊方式*/ 51 align-self:stretch; 52 }
Flexbox中側軸對齊方式有兩種：
（1）伸縮項目行在側軸的對齊方式，主要由屬性align-items控制
（2）伸縮項目自身在側軸的對齊方式，主要由屬性align-self控制
CSS3中設置顏色值：HSLA(H,S,L,A)
取值：
- H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
- S：Saturation(飽和度)。取值為：0.0% - 100.0%
- L：Lightness(亮度)。取值為：0.0% - 100.0%
- A：Alpha透明度。取值0~1之間。