作者：伊倓 | 来源：互联网 | 2023-09-02 09:01
背景介绍
网页布局是前端的一项重点内容，随着移动端的兴起，布局也由浮动（float）定位（position）布局向弹性布局（flex）转移，响应式地实现页面布局，现阶段已经得到了所有主流浏览器的支持。
Flex 是 Flexible Box的缩写，意思是“弹性布局”。主要思想是使父容器能够调节子元素的宽高和排列顺序，从而更好地填充可用空间，适应不同类型的显示设备。
采用Flex布局的元素称为Flex容器（flex container） 简称为容器， 它对应的子元素称为容器成员 （flex item）
1. 任何一个容器都可以指定flex布局
.box {
display: flex;
}
2. 行内元素也可以使用Flex布局
.box {
display: inline-flex;
}
3. 如果遇到低版本的浏览器可以添加浏览器内核前缀
.box {
display: -webkit-flex; // -webkit- google浏览器内核前缀
}
********** 下面是布局示例 **********
注：容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
一、justify-content属性定义了项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around
}
1. justify-content: flex-start （左对齐）
https://codepen.io/anon/pen/wZdKgy
2. justify-content: center （居中）
https://codepen.io/anon/pen/YMVyvQ
3. justify-content: flex-end （右对齐）
https://codepen.io/anon/pen/PgmPpJxx
4. justify-content:space-between （两端对齐）
https://codepen.io/anon/pen/eoWpdo
5. justify-content:space-around （每个项目两侧的间隔相等）
https://codepen.io/anon/pen/QPvjEx
二、align-items属性定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch
}
1. align-items: flex-start （顶部对齐）
https://codepen.io/anon/pen/JVNXaV
2. align-items: flex-end （底部对齐）
https://codepen.io/anon/pen/qwmZyG
3. align-items: center （中点对齐）
4. align-items: baseline （文字基线对齐）
https://codepen.io/anon/pen/rbmevr
5.align-items: stretch (如没设高度，将占满整个容器高度)
https://codepen.io/anon/pen/MRmyQQs
其他Flex效果请参考链接： Flex 布局语法教程 | 菜鸟教程
京公网安备 11010802041100号