CSS 所有 Flex 属性

CSS Flexbox 是一种布局模式，它允许创建灵活的和响应式的布局结构。这里列出了所有的 Flex 属性，以便您了解如何操作 Flexbox 布局。

display

作用： 定义 Flexbox 的容器或项目。

可选值：

• flex
• inline-flex

示例：

.container {
  display: flex;
}

flex-direction

作用： 定义主轴的方向。

可选值：

• row
• row-reverse
• column
• column-reverse

示例：

.container {
  flex-direction: row;
}

flex-wrap

作用： 定义项目在主轴上是否能够换行。

可选值：

• nowrap
• wrap
• wrap-reverse

示例：

.container {
  flex-wrap: wrap;
}

flex-flow

作用： 是 flex-direction 和 flex-wrap 的简写形式。

示例：

.container {
  flex-flow: row wrap;
}

justify-content

作用： 定义项目在主轴上的对齐方式。

可选值：

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

示例：

.container {
  justify-content: center;
}

align-items

作用： 定义项目在交叉轴上的对齐方式。

可选值：

• flex-start
• flex-end
• center
• baseline
• stretch

示例：

.container {
  align-items: center;
}

align-content

作用： 定义多行项目在交叉轴上的对齐方式。

可选值：

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

示例：

.container {
  align-content: space-between;
}

flex-grow

作用： 定义项目的放大比例。

示例：

.item {
  flex-grow: 1;
}

flex-shrink

作用： 定义项目的缩小比例。

示例：

.item {
  flex-shrink: 1;
}

flex-basis

作用： 定义项目在主轴上的初始大小。

示例：

.item {
  flex-basis: 100px;
}

flex

作用： 是 flex-grow, flex-shrink, 和 flex-basis 的简写形式。

示例：

.item {
  flex: 1 1 100px;
}

order

作用： 定义项目的排列顺序。

示例：

.item {
  order: 2;
}