Skip to content

Flexbox 属性表

弹性盒布局通常是一个容器包含若干内容,对应的样式是描述内容在容器中如何排布。

容器属性

display

布局方式

属性值解释
flex使用弹性盒布局

flex-direction

主轴的方向

默认值:row

属性值解释
row水平方向为主轴,正向为从左到右。
row-reverse水平方向为主轴,且方向逆转,正向为从右到左。
column垂直方向为主轴,正向为从上到下。
column-reverse垂直方向为主轴,且方向逆转,正向为从下到上。

justify-content

主轴上的排列方式。

默认值:flex-start

属性值解释
flex-start子元素在主轴上居正向起点排列。
flex-end子元素在主轴上居正向终点排列。
center子元素在主轴上居中排列。
space-between子元素在主轴上,两边的元素在父元素的起点和终点,且每个子元素中间间隔相同。
space-around子元素在主轴上,每个子元素之间间隔相同。
space-evenly子元素在主轴上均匀排列,每两个子元素之间、两边的子元素到父元素边界的距离均相同。

alt text

align-items

交叉轴上的排列方式。

默认值:stretch

属性值解释
flex-start子元素在交叉轴上居正向起点排列。
flex-end子元素在交叉轴上居正向终点排列。
center子元素在交叉轴上居中排列。
baseline子元素会根据各自内部第一行文本的基线对齐。
stretch如果弹性盒没有高度,或默认高度为 auto,那么子元素会拉伸以填满整个父元素。

flex-wrap

主轴上的内容超出的容器的范围,是否自动换行。

默认值:nowrap

属性值解释
nowrap不换行
wrap换行
wrap-reverse换行,但是换出去的行会在反方向上

flex-flow

flex-directionflex-wrap 的缩写,同时接收这两个参数。

内容属性

order

order 是内容在容器中的顺序值,容器中的内容会按整数顺序从小到大排列。

接收正负整数,默认值是 0

align-self

单个内容元素在交叉轴上的排列方式。接收的值与 align-items 相同。

默认值与父元素的 align-items 相同,设置此属性后会覆盖从父元素继承而来的 align-items

属性值解释
flex-start只有自己在交叉轴上居正向起点排列。
flex-end只有自己在交叉轴上居正向终点排列。
center只有自己在交叉轴上居中排列。
baseline只有自己会根据各自内部第一行文本的基线对齐。
stretch如果弹性盒没有高度,或默认高度为 auto,只有自己会拉伸以填满整个父元素。

align-content

在使用 wrap 换行的情况下,多行整体在交叉轴的排列方式。

没有换行的时候不起作用。

默认值:stretch

属性值解释
flex-start在交叉轴上居正向起点排列。
flex-end在交叉轴上居正向终点排列。
center在交叉轴上居中排列。
space-between在交叉轴上,两边的元素在父元素的起点和终点,且每个子元素中间间隔相同。
space-around在交叉轴上,每个子元素之间间隔相同。
space-evenly在交叉上均匀排列,每两个子元素之间、两边的子元素到父元素边界的距离均相同。
stretch在交叉轴上拉伸以适应容器。
评论区
评论区空空如也
发送评论
名字
0 / 20
邮箱
0 / 100
评论内容
0 / 140
由于是非实名评论,所以不提供删除功能。如果你需要删除你发送的评论,或者是其他人的评论对你造成了困扰,请 发邮件给我 。同时评论区会使用 AI + 人工的方式进行审核,以达到合规要求。

© thebestxt.cc
辽ICP备16009524号-8
本站所有文章版权所有,转载请注明出处