CSS 弹性盒子布局：详解 13 个重要属性

弹性盒子布局 (Flexbox) 是 CSS 中一种强大的布局模型，能够轻松地实现各种复杂的页面布局。它使用简单的属性来控制弹性盒子的排列、对齐和大小，使布局变得更加灵活和可控。

本文将详细介绍 Flexbox 中的 13 个重要属性，并附带示例说明，帮助你轻松掌握 Flexbox 布局技巧。

1. `display`

display 属性定义弹性布局容器，取值为 flex 或 inline-flex。

flex: 将元素设置为块级弹性盒子容器。
inline-flex: 将元素设置为行内级弹性盒子容器。

.container {
  display: flex;
}

2. `flex-direction`

flex-direction 属性定义主轴方向，取值为以下几个值：

row: 主轴方向为水平方向，从左到右排列。
row-reverse: 主轴方向为水平方向，从右到左排列。
column: 主轴方向为垂直方向，从上到下排列。
column-reverse: 主轴方向为垂直方向，从下到上排列。

.container {
  display: flex;
  flex-direction: column;
}

3. `justify-content`

justify-content 属性定义主轴上的对齐方式，取值为以下几个值：

flex-start: 沿主轴开始方向对齐。
flex-end: 沿主轴结束方向对齐。
center: 沿主轴居中对齐。
space-between: 每个弹性盒子之间间距相等，两端对齐容器两边。
space-around: 每个弹性盒子之间间距相等，两端距离容器边缘的间距为其他间距的一半。
space-evenly: 每个弹性盒子之间间距相等，每个弹性盒子距离容器边缘的距离也相等。

.container {
  display: flex;
  justify-content: space-between;
}

4. `align-items`

align-items 属性定义交叉轴上的对齐方式，取值为以下几个值：

flex-start: 沿交叉轴开始方向对齐。
flex-end: 沿交叉轴结束方向对齐。
center: 沿交叉轴居中对齐。
baseline: 将所有弹性盒子对齐到它们的基线。
stretch: 将所有弹性盒子拉伸到与容器相同的高度。

.container {
  display: flex;
  align-items: center;
}

5. `align-content`

align-content 属性定义多行（或列）在交叉轴上的对齐方式，取值为以下几个值：

flex-start: 沿交叉轴开始方向对齐。
flex-end: 沿交叉轴结束方向对齐。
center: 沿交叉轴居中对齐。
space-between: 每个弹性盒子之间间距相等，两端对齐容器两边。
space-around: 每个弹性盒子之间间距相等，两端距离容器边缘的间距为其他间距的一半。
stretch: 将所有弹性盒子拉伸到与容器相同的高度。

6. `flex-wrap`

flex-wrap 属性定义弹性盒子是否换行，取值为以下几个值：

nowrap: 不换行。
wrap: 换行。
wrap-reverse: 换行，并且顺序反转。

.container {
  display: flex;
  flex-wrap: wrap;
}

7. `flex-flow`

flex-flow 属性定义 flex-direction 和 flex-wrap 的缩写属性。

.container {
  display: flex;
  flex-flow: row wrap;
}

8. `order`

order 属性定义弹性盒子的排列顺序，值越小越靠前，默认为 0。

.item1 {
  order: 2;
}
.item2 {
  order: 1;
}

9. `flex-grow`

flex-grow 属性定义弹性盒子的放大比例，默认为 0，即不放大。

.item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}

10. `flex-shrink`

flex-shrink 属性定义弹性盒子的缩小比例，默认为 1，即缩小到最小宽度。

.item1 {
  flex-shrink: 0;
}
.item2 {
  flex-shrink: 1;
}

11. `flex-basis`

flex-basis 属性定义弹性盒子在主轴上的初始尺寸，默认为 auto。

.item1 {
  flex-basis: 100px;
}

12. `flex`

flex 属性定义 flex-grow、flex-shrink 和 flex-basis 的缩写属性。

.item1 {
  flex: 1 1 100px;
}

13. `align-self`

align-self 属性定义单个弹性盒子在交叉轴上的对齐方式，覆盖 align-items 属性。

.item1 {
  align-self: flex-end;
}

总结

本文详细介绍了 Flexbox 布局模型中的 13 个重要属性，每个属性都提供了丰富的功能，可以轻松地实现各种复杂的布局。希望本文能够帮助你更好地理解和运用 Flexbox，并创建出更灵活、更强大的页面布局。

CSS 弹性盒子布局：详解 13 个重要属性