登录免费注册

首页  思维导图  详情



 



Flex 布局总结

Flex 布局总结

2026-04-12 22:22:20   0  举报





仅支持查看

AI智能生成

flexbox部分内容

其他教育

模板推荐

作者其他创作

大纲/内容

容器属性

display 属性

描述

激活flex布局

值         flex

flex-direction 属性

描述

定义子元素布局方向

值

row

水平排列

row-reverse

反向水平排列

column

垂直排列

column-reverse

反向垂直排列

justify-content 属性

描述

主轴线的对齐方式

值

center

居中

flex-start

左对齐

flex-end

右对齐

space-between

两端对齐，项目之间的间隔都相等

space-around

两端对齐，项目两侧的间隔相等

align-items 属性

描述

侧轴线的对齐方式

值

center

居中

flex-start

顶对齐

flex-end

底对齐

flex-wrap 属性

描述

用于设置伸缩容器的子元素是单行显示还是多行显示

值

nowrap

设置伸缩项目单行显示

wrap

设置伸缩项目多行显示，第一行在上方。

wrap-reverse

与 wrap 相反，第一行在下方。

align-content 属性

描述

用于设置伸缩行的对齐方式

注意

该属性对单行弹性盒子模型无效。

值

center

各行向伸缩容器的中间位置对齐

flex-start

各行向伸缩容器的起点位置对齐

flex-end

各行向伸缩容器的终点位置对齐

space-between

各行会平均分布在一行中

space-around

各行会平均分布在一行中，两端保留一半的空间

项目属性

order 属性

描述

规定了弹性容器中的可伸缩项目在布局时的顺序

注意

order 仅仅对元素的视觉顺序产生作用，并不会影响元素的逻辑顺序。

值

数值，表示此可伸缩项目所在的次序组，默认为0。

align-self 属性

描述

设置伸缩项目自身元素在侧轴的对齐方式

注意

该属性可覆盖 align-items 属性

值

center

伸缩项目向侧轴的中间位置对齐。

flex-start

伸缩项目向侧轴的起点位置对齐。

flex-end

伸缩项目向侧轴的终点位置对齐

 Collect

Get Started

flex弹性布局

 Collect

Get Started

Flex布局

 Collect

Get Started

Flex布局

 Collect

Get Started

Flex布局标签结构图













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document