Flex 布局是一种新型的 CSS 布局模式,它主要用于弹性盒子布局。相比于传统的布局方式,它更加灵活,易于调整,也更加适应不同的设备和屏幕尺寸。本篇博客将详细解析 Flex 布局及其属性,帮助读者深入理解和运用 Flex 布局。
1. Flex 布局介绍
Flex 布局是一种基于容器和项目的布局方式。容器指的是父元素,项目指的是子元素。Flex 布局的核心就是通过设置容器的属性,来影响子元素的布局和排列方式。它具有以下特点:
- 父容器设置了 display: flex 属性后,其子元素就可以变成弹性盒子,从而实现灵活的布局。
- 父容器的子元素可以根据需要自动调整宽度和高度,使得布局更加灵活。
- 父容器可以设置各种属性来影响子元素的布局方式,例如:flex-direction、justify-content、align-items 等。
2. 容器属性
下面介绍 Flex 布局的一些常用的容器属性:
2.1 display
display 属性用于定义一个容器的类型。使用 display: flex 属性可以将一个元素变成弹性盒子,从而使用 Flex 布局。
我们以下面为例
<style>
.container {
margin: 100px auto;
width: 600px;
height: 400px;
background-color: antiquewhite;
}
div {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: aquamarine;
border: 1px solid black;
}
</style>
<div class="container">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/0951dd5935e2569e369d1659604f4e97.png)
设置Flex属性后
.container {
display: flex;
}
![](https://i-blog.csdnimg.cn/blog_migrate/a0c6a418a1e59045e4749653014bfb80.png)
2.2 flex-direction
flex-direction 属性用于定义弹性盒子的主轴方向。默认情况下,弹性盒子的主轴方向是水平方向(row)。可以使用 flex-direction 属性来设置为垂直方向(column)。
flex-direction: row:水平方向效果如图2
.container {
display: flex;
flex-direction: row;
}
flex-direction: column:垂直方向效果如图1
.container {
display: flex;
flex-direction: column;
}
以下例子都是采用默认轴
2.3 justify-content
justify-content 属性用于定义弹性盒子沿着主轴方向的对齐方式。常用的取值有:flex-start(默认值,左对齐)、flex-end(右对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)、space-around(每个项目两侧的间隔相等)。以下我们演示三种常用属性。
justify-content: center:居中对齐
.container {
display: flex;
justify-content: center;
}
justify-content: space-around:每个项目两侧的间隔相等
.container {
display: flex;
justify-content: space-around;
}
justify-content: space-between:两端对齐,项目之间的间隔相等
.container {
display: flex;
justify-content: space-between;
}
2.4 align-items
align-items 属性用于定义弹性盒子沿着交叉轴方向的对齐方式。常用的取值有:stretch(默认值,高度自动扩展)、flex-start(顶部对齐)、flex-end(底部对齐)、center(居中对齐)。
align-items: center:居中对齐
.container {
display: flex;
align-items: center;
}
2.5 flex-wrap
flex-wrap 属性用于定义弹性盒子是否可以换行。默认情况下,弹性盒子不换行。可以使用 flex-wrap 属性来控制换行。常用的取值有:nowrap(不换行,默认值)、wrap(换行,第一行在上方)、wrap-reverse(换行,第一行在下方)。
flex-wrap: nowrap:不换行,元素被挤压
.container {
display: flex;
flex-wrap: nowrap;
}
flex-wrap: wrap:换行
.container {
display: flex;
flex-wrap: wrap;
}
![](https://i-blog.csdnimg.cn/blog_migrate/4dbc2799f0ec526600c7a7f36f897653.png)
2.6 flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写形式。它用于同时设置主轴方向和是否换行。
.container {
display: flex;
flex-flow: row wrap;
}
效果如图3
2.7 align-content
align-content 属性用于定义多行弹性盒子的对齐方式。如果只有一行弹性盒子,则该属性无效。常用的取值有:stretch(默认值,各行高度自动平分剩余空间)、flex-start(各行顶部对齐)、flex-end(各行底部对齐)、center(各行居中对齐)。
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
3. 项目属性
除了容器属性,Flex 布局还有一些常用的项目属性,用于定义弹性盒子中每个子元素的布局方式。
3.1 order
order 属性用于定义子元素的排列顺序。默认情况下,子元素的排列顺序与其在 HTML 中出现的顺序相同。可以使用 order 属性来改变子元素的排列顺序。取值为整数,值越小越靠前。
.A {
order: 3;
}
3.2 flex-grow
flex-grow 属性用于定义子元素的放大比例。默认情况下,子元素不会自动放大,可以使用 flex-grow 属性来控制子元素的放大比例。取值为非负数,表示相对于其他子元素的放大比例。如果所有子元素的 flex-grow 属性都为 1,则它们会等分剩余空间。
注:如果一个元素占了一定位置,另外一个元素设置 flex-grow: 1;会将剩下的空间全部占有.
.A {
flex-grow: 1;
}
.B {
flex-grow: 2;
}
.C {
flex-grow: 1;
}
3.3 flex-shrink
flex-shrink 属性用于定义子元素的缩小比例。默认情况下,子元素不会自动缩小,可以使用 flex-shrink 属性来控制子元素的缩小比例。取值为非负数,表示相对于其他子元素的缩小比例。
.A {
flex-shrink: 0.1;
}
3.4 flex-basis
flex-basis 属性用于定义子元素在弹性盒子中的初始大小。默认情况下,子元素的初始大小为它们的内容大小。可以使用 flex-basis 属性来改变子元素的初始大小。取值为长度值或百分比值。
.A {
flex-basis: 200px;
}
3.5 flex属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式。它的取值分别为 flex-grow、flex-shrink 和 flex-basis,中间用空格隔开。如果只指定两个值,则第二个值为 flex-shrink 属性的值。如果只指定一个值,则该值既是 flex-grow 属性的值,也是 flex-basis 属性的值。
.A {
flex: 1 1 200px;
}
3.6 align-self
align-self 属性用于定义子元素在交叉轴上的对齐方式。默认情况下,所有子元素都与容器的交叉轴对齐。可以使用 align-self 属性来改变子元素的对齐方式。常用的取值与 align-items 属性相同。
.A {
align-self: flex-end;
}
4. 实例演示
下面是一个简单的实例,用于演示 Flex 布局的用法:
<style>
.container {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin: 100px auto;
width: 600px;
height: 400px;
background-color: antiquewhite;
}
div {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: aquamarine;
border: 1px solid black;
}
.A {
flex: 1 0 200px;
}
</style>
<div class="container">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
<div class="E">E</div>
<div class="F">F</div>
</div>
5. 总结
Flex 布局是一种强大的布局方式,可以帮助我们轻松地实现各种复杂的布局效果。在使用 Flex 布局时,我们需要掌握容器属性和项目属性,以及它们的取值和用法。只有掌握了这些知识,才能更好地利用 Flex 布局来实现我们所需的布局效果。