CSS flex 布局

Frey August 16, 2022 [编程] #CSS

flex-direction

决定主轴方向 row,row-reverse,colum,colum-reverse

flex-wrap

是否换行 nowrap,wrap,wrap-reverse

flex-flow

flex-direction属性和flex-wrap属性的简写形式

justify-content

对齐方式 flex-start,flex-end,center,space-between,space-around

align-items

在交叉轴上的对齐方式 flex-start,flex-end,center,baseline,stretch

align-content

定义多根轴线的对齐方式 flex-start,flex-end,center,space-between,space-around,stretch

flex-basis

flex-basis: number|auto|initial|inherit;

flex-basis设置弹性项目的初始长度。

描述
number长度单位或百分百,规定弹性项目的初始长度。
auto默认值。长度等于弹性项目的长度。如果该项目未规定长度,则长度将依据其内容。
initial将此属性设置为其默认值。
inherit从其父元素继承此属性。

flex-grow

flex-grow: number|initial|inherit; flex-grow属性规定在相同的容器中,项目相对于其余弹性项目的增长量。

描述
number一个数字,规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
initial将此属性设置为其默认值。
inherit从其父元素继承此属性。

flex-shrink

flex-shrink: number|initial|inherit; flex-shrink属性规定当项目溢出时,按比例对所有项目进行空间收缩。

描述
number一个数字,规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
initial将此属性设置为其默认值。
inherit从其父元素继承此属性。

参考

1.Flex布局语法教程|菜鸟教程

Back to top