css/flexbox_tutorial

Flexbox 是 CSS3 中的一种布局模型，它能够轻松实现复杂布局。以下是一些关于 Flexbox 的基础知识和使用技巧。

基础概念

• 容器 (Container): 使用 display: flex; 或 display: grid; 声明的元素。
• 项目 (Item): 容器中的子元素。
• 主轴 (Main Axis): 沿着容器的主方向。
• 交叉轴 (Cross Axis): 垂直于主轴的方向。

属性

• flex-direction: 定义主轴的方向。

  • row: 主轴为水平方向，起点在左端。
  • row-reverse: 主轴为水平方向，起点在右端。
  • column: 主轴为垂直方向，起点在上沿。
  • column-reverse: 主轴为垂直方向，起点在下沿。

• flex-wrap: 定义如果一行显示不下，如何换行。

  • nowrap: 默认值，不换行。
  • wrap: 换行，第一行在左侧。
  • wrap-reverse: 换行，第一行在右侧。

• justify-content: 定义项目在主轴上的对齐方式。

  • flex-start: 起点对齐。
  • flex-end: 结点对齐。
  • center: 居中对齐。
  • space-between: 两端对齐，项目之间的间隔都相等。
  • space-around: 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。

• align-items: 定义项目在交叉轴上如何对齐。

  • stretch: 默认值，拉伸填充整个交叉轴。
  • flex-start: 起点对齐。
  • flex-end: 结点对齐。
  • center: 居中对齐。
  • baseline: 基线对齐。

• align-content: 定义多根轴线的对齐方式。

  • stretch: 默认值，拉伸填充整个交叉轴。
  • flex-start: 起点对齐。
  • flex-end: 结点对齐。
  • center: 居中对齐。
  • space-between: 两端对齐，轴线之间的间隔都相等。
  • space-around: 每个轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍。

实例

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

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

更多关于 Flexbox 的知识，请访问Flexbox 教程。

Flexbox 示例