四、侧轴对齐方式补充 align-self
如果在伸缩容器中想控制侧轴的对齐方式，align-items是一次性控制所有伸缩项的对齐方式。
如果只想控制一个伸缩项在侧轴的对齐方式，就在需要控制对齐的那个伸缩项中设置align-self属性
align-items:写在伸缩容器中 / 控制所有伸缩项
align-self:写在伸缩项中 / 控制需要对齐的那个伸缩项
align-self 中的值和align-items相同，只是作用的范围不同
ul>li:nth-child(1){
background-color: red;
align-self: flex-start;
}
ul>li:nth-child(2){
background-color: blue;
align-self: center;
}
ul>li:nth-child(3){
background-color: green;
align-self: flex-end;
}
image.png
五、换行和换行对齐
flex-wrap 设置在伸缩容器中
默认情况下，当伸缩容器的一行放不下所有伸缩项时，那么系统会等比例压缩所有伸缩项，将所有伸缩项控制在一行内。
1.flex-wrap:nowrap; 不换行，将所有伸缩项控制在一行中
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时，通过等比例压缩所有伸缩项将所有伸缩项控制在一行中*/
flex-wrap: nowrap;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
等比例压缩的过程：
1.所有伸缩项的空间-伸缩容器的空间=超出一行的空间
2.超出一行的空间 / 伸缩项的个数 = 每个伸缩项要压缩的空间
3.伸缩项的空间 - 需要压缩的空间 = 压缩后的空间
3.试着代入
200 * 3 - 400 = 200px
200 / 3 = 66.67px
200 - 66.67 = 133.33px
133.33px就是每个li等比例压缩后的数值
image.png
2.flex-wrap:wrap; 当所有伸缩项超过一行时，换行显示
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时就换行显示*/
flex-wrap: wrap;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
image.png
3.flex:wrap-reverse; 放不下就换行，然后以行为单位反转
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时就换行显示,并以行为单位反转*/
flex-wrap: wrap-reverse;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
image.png
felx-wrap 总结：
1.felx-wrap:no-wrap; 当一行放不下所有伸缩项时，通过等比例压缩，将所有伸缩项控制于一行
2.flex-wrap:wrap; 当一行放不下所有伸缩项时，就换行显示
3.flex-wrap:wrap-reverse; 当一行放不下所有伸缩项时，就换行显示，并以行为单位进行反转
六、align-content 换行后的对齐方式
设置在伸缩容器中，控制换行之后的对齐方式，所以只有伸缩项换行之后该属性才生效
align-content和align-items的属性基本一致
1.align-content：flex-start; 换行之后和侧轴的起点对齐，一行接一行
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时，通过等比例压缩所有伸缩项将所有伸缩项控制在一行中*/
flex-wrap: wrap;
align-content: flex-start;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
image.png
2.align-content：flex-end; 换行之后和侧轴的终点对齐，一行接一行
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时，通过等比例压缩所有伸缩项将所有伸缩项控制在一行中*/
flex-wrap: wrap;
align-content: flex-end;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
image.png
3.align-content：center; 换行之后和侧轴的中点对齐，一行接一行
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时，通过等比例压缩所有伸缩项将所有伸缩项控制在一行中*/
flex-wrap: wrap;
align-content: center;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
image.png
4.align-content：space-between; 换行之后在侧轴的两端对齐
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时，通过等比例压缩所有伸缩项将所有伸缩项控制在一行中*/
flex-wrap: wrap;
align-content: space-between;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
image.png
5.align-content：space-around; 换行之后在侧轴上环绕对齐
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时，通过等比例压缩所有伸缩项将所有伸缩项控制在一行中*/
flex-wrap: wrap;
align-content: space-around;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
和align-items的原理相同
image.png
6.align-content：stretch; 换行后的默认样式
align-items:stretch；是将所有伸缩项的高度拉长变成侧轴的高度，注意每个伸缩项不能设置高度；
align-content:stretch；以行为单位进行拉伸，拉伸部分用空白填充，保证填充后的所有行相加能填满侧轴
ul{
width: 400px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器当一行放不下所有伸缩项时，通过等比例压缩所有伸缩项将所有伸缩项控制在一行中*/
flex-wrap: wrap;
align-content: stretch;
}
ul>li{
width: 200px;
height: 100px;
line-height: 100px;
}
image.png
align-content 总结
1.align-content：flex-start; 换行之后与侧轴的起点对齐，一行接一行
2.align-content：flex-end; 换行之后与侧轴的终点对齐，一行接一行
3.align-content：center; 换行之后与侧轴的中点对齐，一行接一行
4.align-content：space-between; 换行之后在侧轴的两端对齐
5.align-content：space-around; 换行之后在侧轴环绕对齐
6.align-content：stretch 换行之后，以行为单位进行拉伸，拉伸部分用空白填充，使所有拉伸后的伸缩项相加能填满侧轴。
我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com
网友评论