Flex 布局入门：为什么它会成为前端布局的常用方案
0 阅读
前端页面布局一直是开发中非常重要的一部分。
在很多传统写法里，水平排列、垂直居中、间距分布这些需求都需要绕不少弯。Flex 布局之所以被广泛接受，就是因为它让这些常见布局问题变得更自然了。
Flex 布局解决了什么问题
Flex 更适合处理一维布局，也就是：
- 一行里的元素怎么排
- 一列里的元素怎么排
- 元素之间怎么分配剩余空间
比如导航、按钮组、表单操作栏、卡片头部，这些都非常适合用 Flex。
最基础的一步是设置 display: flex
只要一个容器设置了：
1.container { 2 display: flex; 3}
它的直接子元素就会进入 Flex 布局上下文。
这也是理解 Flex 的第一个重点：Flex 影响的是容器和直接子元素之间的关系。
主轴和交叉轴的概念
Flex 最核心的两个概念是：
- 主轴
- 交叉轴
默认情况下，主轴是水平方向。
也就是说，子元素默认会沿着一行排列。
如果通过：
1flex-direction: column;
改成纵向，那么主轴就会变成垂直方向。
justify-content 和 align-items 的区别
这是最容易混淆的一组属性。
justify-content控制主轴对齐align-items控制交叉轴对齐
如果主轴是横向，那么：
justify-content管水平分布align-items管垂直对齐
为什么垂直居中变简单了
以前做一个内容水平垂直居中，经常要借助复杂技巧。Flex 之后可以直接这样写：
1.box { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5}
这也是很多人开始喜欢 Flex 的原因之一。
flex-grow 的作用
Flex 还有一个很实用的能力，就是让某些元素自动占据剩余空间。
例如：
1.content { 2 flex: 1; 3}
这样某个区域就可以根据剩余空间自动伸展，非常适合做：
- 左右布局
- 自适应内容区
- 页头中间区域撑满
写在最后
Flex 布局之所以会成为前端常用方案，不是因为它万能，而是因为它非常适合解决页面里大量常见的一维布局问题。
只要你理解了主轴、交叉轴、对齐方式和伸缩逻辑，很多过去看起来麻烦的布局都会变得简单很多。