css中的flex布局

发表于 2023-12-21 更新于 2024-08-14 阅读次数：

对flex布局总是一知半解的，系统的学习一下。

首先肯定是去MDN看，但文档很分散，看得相当不直观。

于是找到一篇阮一峰的文章Flex 布局教程：语法篇，配图解释得非常清晰。网友还给做了一个在线演示，可以直接在浏览器开发工具中调整参数，查看效果。

看完后还有一个练习的网站，可以检查一下有没有正确理解：Flexbox Froggy。

这里再记录一下个人的理解。

flexible box layout，简称flex，是一个二维的布局模型，有两个轴：主轴（水平轴、横轴）和交叉轴（垂直轴、竖轴）。

grid layout，简称grid，也是一个二维的布局模型，同样有两个轴：行内轴（水平轴、横轴、行轴）和块轴（垂直轴、竖轴、列轴）。和flex box的不同之处在于，grid通过和定义行和列，两个轨道。

justify-content和align-content都用来控制子元素的对齐，但它们的方向不同。

justify-content是主轴（水平）方向的，align-content是交叉轴（垂直）方向的。

align-items相当于对所有子项目都设置了align-self，是针对子项目在交叉轴（垂直）方向的对齐。

而align-content针对的是在子项目之间和周围分配空间，并不会改变子项目的大小。

比如页面被水平的分为两部分：左边是导航栏，右边是内容区域。

与平常导航栏为固定宽度情况不同的是，两边都是自适应宽度。

此时可以通过简单的设置导航栏的flex-shrink为 0，内容区域的flex-grow为 1，来实现导航栏保持最小宽度而内容区域为自动扩展的效果。