弹性布局是css
的一种布局方式,可以完整响应式的实现页面的布局,这里的响应式指的是可随页面变大变小,弹性容器中默认存在两条轴,主轴和交叉轴,主轴默认为x轴
可以用
flex-direction: column
来修改主轴为y轴
依旧是拿ul
和三个li
为例
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
width: 200px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li class="item1">1</li>
<li class="item2">2</li>
<li class="item3">3</li>
</ul>
</body>
</html>
默认效果如下
现在给ul
加上一个display: flex
,那么ul
里面的东西都会脱离文档流,这个时候想要其继续实现下面的效果,需要给ul
单独加上个100vh
的高度
css
ul {
height: 100vh;
}
过一遍所有的属性
css
ul {
display: flex;
}
三个li
会横向排布,默认从左往右
css
ul {
display: flex;
flex-direction: row-reverse;
}
主轴翻转,从右往左排布
css
ul {
display: flex;
flex-direction: column-reverse;
}
交叉轴翻转,从下往上排
css
ul {
display: flex;
flex-wrap: wrap;
}
超出则换行
css
ul {
display: flex;
flex-flow: row nowrap;
}
flex-flow
是flex-direction
和flex-wrap
的合体。主轴是x轴且不换行,还是默认效果
css
ul {
display: flex;
justify-content: center;
}
主轴居中
css
ul {
display: flex;
justify-content: flex-start;
}
居主轴方向起始位置,默认就是居左
css
ul {
display: flex;
justify-content: flex-end;
}
居主轴方向终点位置,默认就是居右
css
ul {
display: flex;
justify-content: space-around;
}
给每个子容器都添加相同的间隙
css
ul {
display: flex;
justify-content: space-between;
}
第一个子元素最左,第二个元素最右,其余子元素均匀分布
css
ul {
display: flex;
align-items: center;
}
交叉轴居中
css
ul {
display: flex;
align-items: flex-start;
}
居交叉轴方向起点位置,默认就是居上,就是默认效果
css
ul {
display: flex;
align-items: flex-end;
}
居交叉轴方向终点位置,默认就是居下
css
ul {
display: flex;
align-items: baseline;
}
对准文字基线,就是默认效果
css
ul {
display: flex;
align-items: stretch;
}
交叉轴默认对齐方式,默认效果
css
ul {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
超出换行时,居上对齐,center为居中,flex-end为居下
css
ul {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
超出换行时,居交叉轴分布均匀,space-around即填充空格
css
ul {
display: flex;
}
.item2 {
order: -1;
}
order控制子元素的排列顺序,默认值为0,顺序是从小到大,也就是越小越靠前
css
ul {
display: flex;
}
.item2 {
flex-shrink: 0;
}
控制item2就是不缩小,flex-shrink默认值为1
css
ul {
display: flex;
}
ul li {
flex-grow: 1;
}
flex-grow的默认值为0,就是超出默认大小时不放大,若为1,超出时也放大,占满整个宽度
css
ul {
display: flex;
}
ul li {
flex-basis: 250px;
}
权重比宽高高,这个是初始尺寸的宽
css
ul {
display: flex;
}
ul li {
flex: 1;
}
1比1的比例继承父容器的宽度,因此三个li占满屏幕
css
ul {
display: flex;
}
ul li {
flex: 1 1 300px
}
三个参数分别对应flex-grow flex-shrink flex-basis
,因此就是会放大,会缩小,基础宽度为300,0 0 300
就是既不放大也不缩小
最后
弹性布局的属性看着多,其实也还好,align
就是纵向轴,justify
就是主轴,弹性容器可控制主轴和交叉轴的对齐方式,以及收缩比,排列布局方式,其应用场景最多就是作居中和三栏布局
另外有不懂之处欢迎在评论区留言,如果觉得文章对你学习有所帮助,还请"点赞+评论+收藏"一键三连,感谢支持!