flex布局不仅使用方便而且能大大缩短页面开发的时间,主要需要掌握2点,排列方向和对齐方式,下面进行详细介绍
1、水平排列 VS 垂直排列
row \ row-reverse \ column \ column-reverse
.flex-wrp{
display: flex;
flex-direction: row;//默认水平:row 垂直:column
}
.flex-item{
width:300px;
}
<div class="flex-wrp">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>复制代码
2、水平方向对齐 justify-content
flex-start \ flex-end \ center \ space-between \ space-around
.flex-wrp{
display: flex;
flex-direction: row;
justify-content: center;
}复制代码
3、垂直方向对齐 align-items
stretch(子元素未设置高度时) \ flex-start \ flex-end \ center \ baseline