主轴

Flexbox 中,主轴由 flex-direction 属性设置的方向定义。flex-direction 有四个可能的值:

  • row(行)
  • row-reverse(反向行)
  • column(列)
  • column-reverse(反向列)

如果您选择 rowrow-reverse,则主轴将沿内联方向的行方向延伸。

In this image the flex-direction is row which forms the main axis

选择 columncolumn-reverse,则主轴将沿块方向从页面顶部到底部延伸。

Three flex items taking up the full width of the container, displayed one below the other in code order. Flex-direction is set to column. The main axis is vertical i.e. from top to bottom

在主轴上,您可以通过向项目本身添加任何可用空间(通过项目上的 flex 属性)来控制弹性项目的尺寸。或者,您可以使用 justify-content 属性控制项目之间和周围的空间。

另请参阅

属性参考

进一步阅读