弹性布局（Flex布局）是CSS3中的一个重要特性，用于实现灵活、响应式的页面布局。它允许开发者轻松控制容器中项目的排列、对齐和尺寸调整。主轴和交叉轴的概念是理解Flex布局的关键，通过`flex-direction`、`flex-wrap`等属性可以调整布局方向和换行行为。此外，`justify-content`和`align-items`分别用于主轴和交叉轴上的对齐，而`order`、`flex-grow`、`flex-shrink`和`flex-basis`等属性则控制项目的顺序和弹性大小。了解并掌握这些属性，能帮助开发者更高效地创建现代网页布局。
弹性布局是css3新推出来的一种布局方式。
弹性布局又叫flex布局，可以简便、完整、响应式的实现各种页面布局，也得到所有主流浏览器的支持。
容器与项目
容器 box 需要添加弹性布局的父元素
项目 item 弹性布局容器中的每一个子元素
主轴交叉轴
主轴 principal axis 在弹性布局中，通过属性规定水平或垂直方向为主轴。
交叉轴 intersecting axle 与主轴垂直的另一方向，称为交叉轴
使用弹性布局需要注意的问题
给父容器添加display:flex/inline-flex属性后，容器内容采用弹性布局显示，而不遵守常规文档流的显示方式。
容器添加弹性布局后，仅仅是容器中的项目采用弹性布局，而容器本身在文档流中的定位方式依然遵循常规文档流。
display:flex 容器添加弹性布局后，显示为块级元素
display:inline-flex 容器添加弹性布局后，显示为行级元素
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
