概述:
1、flex,即 flexible box,中文为弹性盒子
2、需要有flex container(弹性容器) 和 flex item(子元素),对弹性容器中的子元素进行弹性布局
1、元素正常情况下排列
.container {
width: 400px;
height:400px;
padding: 10px;
border: 2px solid #dbdbdb;
}
.item {
width: 100px;
height: 100px;
color: #fff;
font-size: 30px;
}
.color1 {
background-color: #b4b3ff;
}
.color2 {
background-color: pink;
}
.color3 {
background-color: #803f64;
}
<div class="container">
<div class="item color1"></div>
<div class="item color2"></div>
<div class="item color3"></div>
</div>
图1
2、flex布局排列
会消除块状属性,所有与块状相关的属性将失效,比如块状元素会独占一行,如图01,设置flex后会在一行排列
.container {
display: flex;
}
图2
3、flex布局主轴方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
该属性决定主轴方向,有四种情况
1、row:横向正序排列,默认情况,主轴方向从左往右(→)
2、row-reverse:横向倒序排列,主轴方向从右往左(←)
图4
3、column:纵向正序排列, 主轴方向从上到下(↓)
图5
4、column-reverse:为纵向倒序排列,主轴方向从下到上(↑)
图7
4、flex布局主轴方向对齐方式
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
该属性决定主轴对齐方向,有五种情况,以下按照主轴方向从左往右示例
1、flex-start:默认情况,沿主轴开始方向对齐
2、flex-end:沿主轴相反方向对齐
图9
3、center:在主轴方向居中显示
图10
4、space-between:沿主轴方向两端对齐
图11
5、space-around:从主轴开始,项目两边间隔相同
图11
5、flex布局交叉轴对齐效果
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
交叉轴与主轴垂直,比如主轴在水平方向,则交叉轴在垂直方向
1、flex-start:沿交叉轴开始方向对齐
2、flex-end:沿交叉轴结束方向对齐
图13
4、center:沿交叉轴方向居中对齐
图14
5、baseline:文字基线对齐
图15
6、stretch:如果元素不设置高度(交叉轴为纵轴)或者宽度(交叉轴为横轴)时,自动填充整个容器
图16
6、flex布局主轴换行
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
1、nowrap:默认不换行
2、wrap:换行
图18
3、wrap-reverse,逆向换行,第一行会跑到第二行下面
图19
网友评论