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之间。