CSS3 box-pack 属性

box-pack 属性用于指定在 flex 容器中如何对齐 flex 项目沿主轴方向排列。该属性仅适用于 flex 容器。

值

• start：默认值，将 flex 项目沿主轴起点对齐。
• end：将 flex 项目沿主轴终点对齐。
• center：将 flex 项目沿主轴居中对齐。
• justify：将 flex 项目沿主轴两端对齐，项目之间间距相等。
• flex-start：与 start 相同。
• flex-end：与 end 相同。
• space-between：将 flex 项目沿主轴两端对齐，项目之间间距相等，首个项目与容器起点对齐，末尾项目与容器终点对齐。
• space-around：将 flex 项目沿主轴均匀分布，项目之间间距相等，项目与容器起点和终点的间距是相邻项目间距的一半。

示例

// www.javascriptcn.com code example
.container {
  display: flex;
  box-pack: start;
}

.container {
  display: flex;
  box-pack: end;
}

.container {
  display: flex;
  box-pack: center;
}

.container {
  display: flex;
  box-pack: justify;
}

.container {
  display: flex;
  box-pack: space-between;
}

.container {
  display: flex;
  box-pack: space-around;
}

以上是关于 box-pack 属性的详细介绍和示例代码。在实际开发过程中，根据布局需求选择合适的值来对齐 flex 项目，可以更好地控制布局效果。