CSS Flexbox 是一种布局方式，能够使得网页的布局更加灵活和自适应。本文将详细介绍 CSS Flexbox 的各种属性值，方便大家更好地使用和理解 Flexbox。
display
Flexbox 布局需要使用 display 属性，其值为 flex 或 inline-flex。flex 用于块级元素，inline-flex 用于行内元素。
示例代码：
.container {
display: flex;
}flex-direction
flex-direction 属性用于设置主轴的方向，其值可以为 row（默认值，水平方向）、row-reverse（水平方向，从右到左）、column（垂直方向，从上到下）、column-reverse（垂直方向，从下到上）。
示例代码：
.container {
display: flex;
flex-direction: row-reverse;
}flex-wrap
flex-wrap 属性用于设置容器内的子元素如何换行，其值可以为 nowrap（默认值，不换行）、wrap（换行，第一行在上方）和 wrap-reverse（换行，第一行在下方）。
示例代码：
.container {
display: flex;
flex-wrap: wrap;
}flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 的简写形式，其值为两个属性值的组合，中间用空格隔开。
示例代码：
.container {
display: flex;
flex-flow: row wrap;
}justify-content
justify-content 属性用于设置子元素在主轴上的对齐方式，其值可以为 flex-start（默认值，靠左对齐）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，子元素之间间隔相等）、space-around（子元素两侧间隔相等）。
示例代码：
.container {
display: flex;
justify-content: center;
}align-items
align-items 属性用于设置子元素在交叉轴上的对齐方式，其值可以为 flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、stretch（默认值，填满整个交叉轴）、baseline（基线对齐）。
示例代码：
.container {
display: flex;
align-items: center;
}align-content
align-content 属性用于设置多行子元素在交叉轴上的对齐方式，其值可以为 flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、stretch（默认值，填满整个交叉轴）、space-between（两端对齐，子元素之间间隔相等）、space-around（子元素两侧间隔相等）。
示例代码：
.container {
display: flex;
align-content: center;
}order
order 属性用于设置子元素的排列顺序，其值可以为任意整数。默认值为 0，数值越小越靠前。
示例代码：
.item {
order: 1;
}flex-grow
flex-grow 属性用于设置子元素的放大比例，默认值为 0，即不放大。如果多个子元素都设置了 flex-grow，它们的比例决定了它们放大的比例。
示例代码：
.item {
flex-grow: 1;
}flex-shrink
flex-shrink 属性用于设置子元素的缩小比例，默认值为 1，即会缩小。如果多个子元素都设置了 flex-shrink，它们的比例决定了它们缩小的比例。
示例代码：
.item {
flex-shrink: 0;
}flex-basis
flex-basis 属性用于设置子元素在主轴上的初始大小，默认值为 auto。它可以设置为具体的像素值或百分比。
示例代码：
.item {
flex-basis: 100px;
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式，中间用空格隔开。默认值为 0 1 auto。
示例代码：
.item {
flex: 1 0 200px;
}综上所述，CSS Flexbox 提供了强大的布局功能，可以帮助我们更好地实现网页的自适应和灵活性。掌握了这些属性值的使用方法，我们就能更好地使用 Flexbox。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d10a81a941bf713423ae6d