它是CSS3中新增的规范
Flex布局中主要包含了以下五个概念:
-
弹性容器(flex container):采用Flex布局的外层容器。
-
弹性项(flex item):容器中的子元素。
-
主轴(main axis): 弹性容器的水平或垂直方向。
-
交叉轴(cross axis):与主轴垂直的方向。
-
对齐方式(align):设置弹性项在弹性容器内的对齐方式。
弹性容器有以下常见属性:
1. flex-direction:用于设置主轴的方向。它有四个取值:
-
row:默认值,主轴为水平方向
-
column:主轴为垂直方向
-
row-reverse:主轴为水平方向,但是从右向左排列
-
column-reverse:主轴为垂直方向,但是从下往上排列
-
比如:
.container {
display: flex;
flex-direction: column;
}
上述代码中,设置弹性容器的主轴方向为垂直方向。
2. flex-wrap:用于定义弹性容器里的弹性项是否应该换行。它有三个取值:
-
nowrap:默认值,弹性项不换行
-
wrap:弹性项自动换行,如果需要的话
-
wrap-reverse:弹性项自动换行,但是倒序排列
3. justify-content:定义在主轴上弹性项的对齐方式。它有五个取值:
-
flex-start:默认值,弹性项在主轴上从左至右排列
-
flex-end:弹性项在主轴上从右至左排列
-
center:弹性项在主轴上居中排列
-
space-between:弹性项在主轴上平均分布排列,左右两端没有空隙
-
space-around:弹性项在主轴上平均分布排列,各自之间有空隙
4. align-items:定义在交叉轴上弹性项的对齐方式。它有五个取值:
-
- flex-start:弹性项在交叉轴上从上至下排列
-
flex-end:弹性项在交叉轴上从下至上排列
-
center:弹性项在交叉轴上居中排列
-
baseline:每个弹性项都根据其文本基线进行对齐
-
stretch:默认值,弹性项在交叉轴上被拉伸填满弹性容器
5. align-content:定义弹性容器内的多行弹性项在交叉轴上的对齐方式。它有六个取值:
-
flex-start:弹性项在交叉轴上从上至下排列
-
flex-end:弹性项在交叉轴上从下至上排列
-
center:弹性项在交叉轴上居中排列
-
space-between:弹性项在交叉轴上平均分布排列,每行之间没有空隙
-
space-around:弹性项在交叉轴上平均分布排列,每行之间有空隙
-
stretch:默认值,弹性项在交叉轴上被拉伸填满弹性容器
除了以上五个属性外,弹性容器还有如下属性可以使用:
-
flex-flow:是flex-direction和flex-wrap的缩写属性,用于指定弹性容器的主轴方向和换行方式。默认值为“row nowrap”。
-
gap:用于设置弹性容器和弹性项之间的间隔。它可以接收一个长度值或百分比。
.container {
gap: 20px;
}
上述代码中,设置弹性容器和弹性项之间的间隔为20px。
三、弹性项的基础使用
在弹性容器内添加子元素,就变成了弹性项(flex item)。不同于传统布局,Flex布局会根据弹性容器内的属性和内容进行位置布局。
弹性项有以下常见属性:
- flex-grow:定义弹性项的放大比例。默认值为0,即不进行放大。
.item {
flex-grow: 2;
}
上述代码中,设置该弹性项在放大时会占据更多空间。
- flex-shrink:设置弹性项的缩小比例。默认值为1,即缩小比例和弹性容器内其他元素相同。
.item {
flex-shrink: 2;
}
上述代码中,设置该弹性项在缩小时会占据更少的空间。
- flex-basis:设置弹性项在弹性容器内的基准宽度。默认值为auto,即弹性项的宽度由其内容决定。
.item {
flex-basis: 50%;
}
上述代码中,设置该弹性项在弹性容器内占50%的空间。
- flex:是flex-grow、flex-shrink和flex-basis这三个属性的缩写,它们按照顺序分别对应以上三个属性。默认值为“0 1 auto”。
.item {
flex: 1 2 100px;
}
上述代码中,设置该弹性项的放大比例为1,缩小比例为2,基准宽度为100px。