flex布局代码:
1
2
3
它的效果和传统布局是一样的,并且我们不需要考虑他是块级元素还是行内元素,或者考虑清除浮动等等影响
如果我们要三个span平均分三等份的话,只需要加一句flex:1,也就是:
div span {
flex:1;
width: 100px;
height: 60px;
background-color: purple;
}
这样就可以轻松的实现平均分三等份了
有没有体验到flex弹性布局的便捷😊
二、flex布局父项常见属性
1.flex-direction
flex-direction 设置主轴方向
就是他决定子级元素是横着排列还是竖着排列
默认是 flex-direction:row (横着从左往右排)
在上面的例子中,如果给父级添加 flex-direction:column,子级元素就会竖着排列:
代码:
div {
display: flex;
width: 500px;
height: 200px;
background-color: pink;
flex-direction: column;
}
2.justify-content
justify-content 设置主轴上的子元素排列方式
默认为: justify-content:flex-start; (从头开始排,贴着左边对齐)
如果想贴着右边对齐就是:
justify-content:flex-end;
如果想沿着主轴居中对齐就是:
justify-content:center;
这样我们实现让父盒子里的子盒子水平居中对齐就非常的方便了
平均分配剩余空间:
justify-content:space-around;
先两边贴边,再平分剩余空间:
justify-content:space-between;
3.flex-wrap
我们先创建一个粉色