1、主轴对齐方式---justify-content
flex-start:默认值,盒子从起点依次排列
flex-end:盒子从终点依次排列
center:盒子沿主轴居中排列
space-bewtteen:盒子沿主轴均匀排列,空白间距均分在盒子之间
space-around:盒子沿主轴均匀排列,空白间距均分在盒子两侧
space-evenly:盒子沿主轴均匀排列,盒子与容器之间间距相等
2、侧轴对齐方式---align-items
stretch:默认,盒子沿侧轴线被拉伸至铺满容器。
center:盒子沿侧轴居中排列。
flex-start:盒子从起点依次排列。
flex-end:盒子从终点一次排列。
3、换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行展示。
flex-wrap:no-wrap; 不换行
flex-wrap:wrap; 换行
4、行对齐方式---align-content(适合于多行盒子)
flex-start:默认值,盒子从起点依次排列
flex-end:盒子从终点依次排列
center:盒子沿主轴居中排列
space-bewtteen:盒子沿主轴均匀排列,空白间距均分在盒子之间
space-around:盒子沿主轴均匀排列,空白间距均分在盒子两侧
space-evenly:盒子沿主轴均匀排列,盒子与容器之间间距相等
5、修改主轴方向
row:默认值,水平方向,从左到右
column:垂直方向,从上到下
row-reverse:水平方向,从右到左
column-reverse:垂直方向,从下到上
6、 弹性伸缩比---flex
整数数字,表示占用父级剩余尺寸的份数。
.box {
width: 600px;
height: 150px;
background-color: pink;
display: flex;
}
.content {
width: 100px;
height: 100px;
background-color: lawngreen;
border: 1px solid #333;
}
.son2 {
flex: 1;
}
.son3 {
flex: 3;
}
<div class="box">
<div class="content son1"></div>
<div class="content son2"></div>
<div class="content son3"></div>
</div>