Flexbox 色子教程

justify-content (主轴对齐)

对齐方式:

点数:

justify-content 控制项目在主轴上的对齐方式。主轴是 flex-direction 定义的方向。

.container {
display: flex;
justify-content: flex-start;
}

align-items (交叉轴对齐)

对齐方式:

点数:

align-items 控制项目在交叉轴上的对齐方式。交叉轴垂直于主轴。

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

flex-direction (主轴方向)

方向:

点数:

flex-direction 定义主轴的方向，决定了 flex 项目的排列方向。

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

综合演示 - 经典色子图案

⚀ 1点

⚁ 2点

⚂ 3点

⚃ 4点

⚄ 5点

⚅ 6点

点击上方按钮查看不同的色子图案，每个图案都使用不同的 Flexbox 属性组合实现。

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