Skip to content

Latest commit

 

History

History
43 lines (30 loc) · 1.58 KB

File metadata and controls

43 lines (30 loc) · 1.58 KB
title slug l10n
主轴
Glossary/Main_Axis
sourceCommit
d267a8cb862c20277f81bbc223221b36b0c613e6

{{GlossarySidebar}}

{{glossary("flexbox", "弹性盒子")}}的主轴(main axis)由 {{cssxref("flex-direction")}} 属性设置的方向所定义。flex-direction 有四个取值,分别是:

  • row
  • row-reverse
  • column
  • column-reverse

假如选择 row 或者 row-reverse,那么主轴会沿行向延伸。

此图中 flex-direction 为 row,由此构成主轴

选择 column 或者 column-reverse,那么主轴会沿块向从页面上侧延伸到下侧。

三个弹性元素占据了容器的全部宽度,按代码顺序依次从上到下显示。flex-direction 设置为 column。主轴为纵向的,即从上到下。

元素的 flex 属性可将主轴上的任何可用空间加入元素自身,由此可在主轴上控制弹性元素的尺寸。或者你可以用 justify-content 属性控制元素之间和周围的空间。

参见

属性参考

  • {{cssxref("flex-basis")}}
  • {{cssxref("flex-direction")}}
  • {{cssxref("flex-grow")}}
  • {{cssxref("flex-shrink")}}
  • {{cssxref("justify-content")}}
  • {{cssxref("flex")}}

拓展阅读