本文介绍了CSS的弹性布局，包括其解决传统布局问题的优势，以及如何使用flex布局进行响应式设计。主要内容涵盖flex容器的创建、主轴和侧轴的概念、与flex布局相关的样式属性，如flex-direction、flex-wrap、justify-content、align-items等，并详细阐述了弹性子元素的order、align-self、flex-grow、flex-shrink、flex-basis等属性及其应用场景。
弹性布局
-
弹性布局是一种全新的布局方式
我们之前的传统布局, 基于盒模型, 依赖display + position + float. 但是我们之前的处理方式对于某些布局, 排布起来不是特别方便, 比如: 元素的垂直居中
Flex布局是W3C推出的一种新的布局方案, 可以 简便, 完成, 响应式的实现各种页面布局, 目前, flex布局已经适配与所有浏览器
基于盒模型 + flex布局
-
flex的基本概念:
1. 容器(flex container): 设置了display:flex或者inline-flex的元素
2. 弹性子元素(flex item): 容器的子元素
容器内部默认存在两条轴: 主轴(mian axis)和侧轴/交叉轴(cross axis)
主轴的方向"默认"是水平的, "默认"方向从容器的左边(main start)延伸至容器的右边(main end)
侧轴的默认"默认"是垂直的, "默认"方向从容器的顶边(cross start)延伸至容器的底边(cross end)
注意: 主轴和侧轴并不是真实存在的, 它只是我们为了方便识别方向规定的概念
与flex布局有关的样式
-
与容器有关的样式
1. 将元素设置成容器: display: flex/inline-flex;
弹性子元素会沿着主轴的起点开始一直排布到主轴的终点
2. 设置主轴的方向: flex-direction
a. row 默认值
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
