CSS3 box-pack 属性

CSS 属性：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 项目沿主轴均匀分布，项目之间间距相等，项目与容器起点和终点的间距是相邻项目间距的一半。

示例

---------- -
  -------- -----
  --------- ------
-

---------- -
  -------- -----
  --------- ----
-

---------- -
  -------- -----
  --------- -------
-

---------- -
  -------- -----
  --------- --------
-

---------- -
  -------- -----
  --------- --------------
-

---------- -
  -------- -----
  --------- -------------
-

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