CSS 弹性盒子布局(Flexbox)是一种用于创建灵活的、响应式的页面布局的强大技术。以下是一些常见的 CSS 弹性盒子布局属性和相关值:
-
容器属性(适用于父元素):
display
:指定容器元素使用弹性布局,可以设置为flex
或inline-flex
。flex-direction
:指定主轴的方向,可以是row
(水平)column
(垂直)row-reverse
(反向水平)column-reverse
(反向垂直)。
flex-wrap
:定义是否换行,可以是nowrap
(不换行)wrap
(换行)wrap-reverse
(反向换行)。
justify-content
:在主轴上对齐项目,可以是flex-start
(靠左)flex-end
(靠右)center
(居中)space-between
(两端对齐)space-around
(均匀分布)space-evenly
(等距离分布)。
align-items
:在交叉轴上对齐项目,可以是flex-start
(顶部对齐)flex-end
(底部对齐)center
(居中)baseline
(基线对齐)stretch
(拉伸填充)。
align-content
:在多根轴线上对齐项目,仅在有多行时生效,可以是flex-start
(靠上)flex-end
(靠下)center
(居中)space-between
(两端对齐)space-around
(均匀分布)stretch
(拉伸填充)。
-
项目属性(适用于子元素):
order
:定义项目的排列顺序,默认为 0,可以是任意整数值。flex-grow
:定义项目的放大比例,默认为 0,即不放大,可以是任意正数。flex-shrink
:定义项目的缩小比例,默认为 1,即有空间时自动缩小,可以是任意正数。flex-basis
:定义项目的初始大小,默认为auto
,可以是具体长度或百分比。flex
:flex-grow
、flex-shrink
和flex-basis
的简写形式。align-self
:覆盖容器的align-items
属性,单独控制该项目在交叉轴上的对齐方式,可以是auto
、flex-start
、flex-end
、center
、baseline
或stretch
。
这些只是 CSS 弹性盒子布局的一些核心属性和值,还有其他更高级的属性可以进一步扩展和控制弹性盒子布局。使用这些属性和值,您可以创建出各种复杂且灵活的布局。