CSS Flex 容器
父元素(容器)
正如我们在上一章中指定的那样,这是一个 flex 容器(蓝色区域),其中包含三个 flex 项目
1
2
3
通过将 display
属性设置为 flex
,flex 容器就变得灵活了
flex 容器的属性是
flex-direction 属性
flex-direction
属性定义了容器希望如何堆叠 flex 项目的方向。
1
2
3
示例
column-reverse
值将 flex 项目垂直堆叠(但从下到上)
.flex-container {
display: flex;
flex-direction: column-reverse;
}
示例
row-reverse
值将 flex 项目水平堆叠(但从右到左)
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap 属性
flex-wrap
属性指定 flex 项目是否应换行。
下面的示例有 12 个 flex 项目,以更好地演示 flex-wrap
属性。
1
2
3
4
5
6
7
8
9
10
11
12
示例
wrap-reverse
值指定 flex 项目将在必要时换行,并按相反顺序排列
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow 属性
flex-flow
属性是设置 flex-direction
和 flex-wrap
属性的简写属性。
justify-content 属性
justify-content
属性用于对齐 flex 项目
1
2
3
示例
flex-start
值将 flex 项目对齐到容器的开头(这是默认值)
.flex-container {
display: flex;
justify-content: flex-start;
}
示例
flex-end
值将 flex 项目对齐到容器的末尾
.flex-container {
display: flex;
justify-content: flex-end;
}
示例
space-around
值在行之前、之间和之后显示带空格的 flex 项目
.flex-container {
display: flex;
justify-content: space-around;
}
示例
space-between
值在行之间显示带空格的 flex 项目
.flex-container {
display: flex;
justify-content: space-between;
}
align-items 属性
align-items
属性用于对齐 flex 项目。
1
2
3
在这些示例中,我们使用了一个 200 像素高的容器,以更好地演示 align-items
属性。
示例
center
值将 flex 项目对齐到容器的中间
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
示例
flex-start
值将 flex 项目对齐到容器的顶部
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
示例
flex-end
值将 flex 项目对齐到容器的底部
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
示例
stretch
值将 flex 项目拉伸以填充容器(这是默认值)
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
示例
baseline
值对齐 flex 项目,使其基线对齐
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
注意:示例使用不同的字体大小来演示项目是如何根据文本基线对齐的
1
2
3
align-content 属性
align-content
属性用于对齐 flex 行。
1
2
3
4
5
6
7
8
9
10
11
12
在这些示例中,我们使用了一个 600 像素高的容器,并将 flex-wrap
属性设置为 wrap
,以更好地演示 align-content
属性。
示例
space-between
值在 flex 行之间显示相等的空间
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
示例
space-around
值在 flex 行之前、之间和之后显示空间
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
示例
stretch
值将 flex 行拉伸以占据剩余空间(这是默认值)
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
示例
center
值将 flex 行显示在容器的中间
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
示例
flex-start
值将 flex 行显示在容器的开头
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
示例
flex-end
值将 flex 行显示在容器的末尾:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
完美居中
在下面的示例中,我们将解决一个非常常见的样式问题:完美居中。
解决方案:将 justify-content
和 align-items
属性都设置为 center
,flex 项目将完美居中
示例
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
CSS Flexbox 容器属性
下表列出了所有 CSS Flexbox 容器属性
属性 | 描述 |
---|---|
align-content | 修改 flex-wrap 属性的行为。它类似于 align-items,但它对齐 flex 行而不是对齐 flex 项目 |
align-items | 当项目未在交叉轴上使用所有可用空间时,垂直对齐 flex 项目 |
display | 指定 HTML 元素的框类型 |
flex-direction | 指定 flex 容器内弹性项目的方向 |
flex-flow | flex-direction 和 flex-wrap 的简写属性 |
flex-wrap | 指定 flex 项目在空间不足时是否应换行,如果它们在一个 flex 行上没有足够的空间 |
justify-content | 当项目未在主轴上使用所有可用空间时,水平对齐 flex 项目 |