使用float方式让对象水平展示时，有时我们还要考虑到清除浮动的问题
这时直接使用flex，就可以达到float的效果，还不需要清除浮动。
/*ul设置flex属性*/
ul{
width: 500px;
border: 1px solid #000;
margin: 100px;
/*在这*/
display: flex;
}
/*设置li的宽高*/
ul>li{
width: 100px;
height: 100px;
}
/*设置每个li的背景颜色*/
ul>li:nth-child(1){
background-color: red;
}
ul>li:nth-child(2){
background-color: blue;
}
ul>li:nth-child(3){
background-color: green;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
在深入了解伸缩布局前，我们还需要了解一些前置知识
伸缩容器：设置了flex属性的结构， 如ul
伸缩项：伸缩容器里的子集， 如li
主轴：默认从伸缩容器的左侧到右侧的水平线
主轴的起点：如图
主轴的终点：如图
侧轴：主轴的垂直线
侧轴的起点：如图
侧轴的终点：如图
image.png
一、主轴方向 flex-direction
在伸缩布局中，默认情况下水平方向是主轴，主轴的起点在伸缩容器的最左侧，主轴的终点在伸缩容器的最右侧，我们可以通过属性来修改主轴方向
flex-direction：主轴的起点
1.flex-direction: row; 默认值
主轴起点在伸缩容器最左边，终点在伸缩容器最右边，从左至右排版
ul{
width: 500px;
border: 1px solid #000;
margin: 100px;
/*在这*/
display: flex;
flex-direction: row;
}
image.png
2.flex-direction: row-reverse;
起点在伸缩容器最右边，终点在伸缩容器最左边，从右至左排版
image.png
3.flex-direction: column;
起点在伸缩容器最上边，终点在伸缩容器最下边，从上至下排版
image.png
4.flex-direction: column-reverse;
起点在伸缩容器最下边，终点在伸缩容器最上边，从下至上排版
image.png
注意：侧轴是主轴的垂直方向，主轴改变，侧轴也相应发生改变
二、伸缩项根据主轴的对齐方式 justify-content
image.png
1.justify-content: flex-start;默认值
首先根据主轴的方向排序好伸缩项，再将排序好的伸缩项和主轴的起点对齐
伸缩项默认和主轴的起点对齐
ul{
width: 500px;
border: 1px solid #000;
margin: 100px;
display: flex;
flex-direction: row; 主轴起点的默认值
/*在这*/
justify-content: flex-start; 伸缩项对齐的默认值
}
image.png
2.justify-content: flex-end;
首先根据主轴的方向排序好伸缩项，再将排序好的伸缩项和主轴的终点对齐
ul{
width: 500px;
border: 1px solid #000;
margin: 100px;
display: flex;
flex-direction: row; 主轴起点的默认值
/*在这*/
justify-content: flex-end; 主轴上伸缩项对齐的默认值
}
image.png
3.justify-content: center;
首先根据主轴的方向排序好伸缩项，再将排序好的伸缩项和主轴的中点对齐
ul{
width: 500px;
border: 1px solid #000;
margin: 100px;
display: flex;
flex-direction: row; 主轴起点的默认值
/*在这*/
justify-content: flex-center; 主轴上伸缩项对齐的默认值
}
image.png
4.justify-content: space-between;
ul{
width: 500px;
border: 1px solid #000;
margin: 100px;
display: flex;
flex-direction: row; 主轴起点的默认值
/*在这*/
justify-content:space-between;
}
image.png
space-between的对齐过程：
首先，根据主轴的方向排序好伸缩项
image.png
然后，计算 伸缩容器多余的空间space / （伸缩项数目-1）
image.png
最后，将计算好的容器分配到伸缩项之间between
image.png
5.justify-content: space-around;
ul{
width: 500px;
border: 1px solid #000;
margin: 100px;
display: flex;
flex-direction: row; 主轴起点的默认值
/*在这*/
justify-content:space-around; 主轴上伸缩项对齐的默认值
}
image.png
space-around的对齐过程：
首先，根据主轴的方向排序好伸缩项
image.png
然后，计算 伸缩容器多余的空间space / （伸缩项数目 * 2）
image.png
最后，将计算好的容器分配到伸缩项两侧around
image.png
三、伸缩项根据侧轴的对齐方式 align-items
侧轴和主轴相互垂直
和主轴对齐方式相比，侧轴对齐方式也有flex-start center flex-end
1.align-items: flex-start;
根据主轴方向排序好伸缩项，再将伸缩项基于侧轴的起点对齐
ul{
width: 500px;
height: 350px;
border: 1px solid #000;
margin: 100px;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器排版好的伸缩项需要和侧轴的起点对齐*/
align-items: flex-start;
}
image.png
2.align-items: flex-end;
根据主轴方向排序好伸缩项，再将伸缩项和侧轴的终点对齐
ul{
width: 500px;
height: 350px;
border: 1px solid #000;
margin: 100px;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器排版好的伸缩项需要和侧轴的终点对齐*/
align-items: flex-end;
}
image.png
3.align-items: center;
根据主轴方向排序好伸缩项，再将伸缩项和侧轴的中点对齐
ul{
width: 500px;
height: 350px;
border: 1px solid #000;
margin: 100px;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器排版好的伸缩项需要和侧轴的中点对齐*/
align-items: center;
}
image.png
下面是侧轴对齐和主轴对齐 不同 的地方
4.align-items: baseline;
根据主轴方向排序好伸缩项，让所有伸缩项在一条基线上对齐
vertical-align中提到的基线就是最短一个元素的底线
image.png
ul{
width: 500px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器排版好的伸缩项要在一条基线上对齐*/
align-items: baseline;
}
ul>li:nth-child(2){
background-color: blue;
margin-top:50px ;
}
给第二个li设置margin-top:50px ;为了让所有伸缩项的基线在一条线上对齐，红li和绿li也向下移
image.png
5.align-items: stretch;拉伸对齐/等高对齐
让所有伸缩项的高度等于侧轴的高度
注意：伸缩项不能设置高度
ul{
width: 500px;
height: 350px;
border: 1px solid #000;
margin: 100px;
text-align: center;
display: flex;
/*告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器伸缩项从左至右排版*/
flex-direction: row;
/*告诉浏览器排版好的伸缩项需要和侧轴的起点对齐*/
align-items: stretch;
}
ul>li{
width: 100px;
/*height: 100px;*/
line-height: 100px;
}
image.png
总结：根据主轴(justify-content)或侧轴(align-items)的对齐方式方法为
1.伸缩项根据主轴方向按默认方式排序好
2.若设置align-items，则根据侧轴给出的起点对起，justify-content原理相同
我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com
网友评论