「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。
【老生常谈👴】系列好久都没更新啦，这次终于准备在这个系列上加点内容了，哈哈！而这次给大家带来的便是 flex布局，这个已经在现在前端开发中经常使用到的属性，虽然是一个“老东西”了。但是不妨碍它的重要性，因此这篇文章就准备聊聊关于它的事儿，废话不多说，开搞！
什么是flex布局
flex是 flexible 的缩写，翻译过来就是 弹性布局，从它的名称上我们就知道它是一种高度灵活的布局方式，通过它我们可以很轻易的完成较为复杂的布局，例如水平垂直居中等
任何元素都可以使用flex布局，块级元素只需加上display:flex，行内元素加上display:inline-flex，这时该元素就称为了 容器，需要注意的是flex布局中，子元素的float、clear将失效，并且不存在块级和行内元素之分，都统称为 flex-item
本文将从 容器 和 flex-item 两方面去讲解，go，go，go！
容器
容器中存在两条轴，一条 主轴，方向为 从左到右，另一条为 交叉轴，与主轴 垂直交叉，方向为 从上到下
对于flex容器，它有如下属性：
- flex-direction：决定主轴的方向，它有如下值
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿。
- flex-wrap: 用来指定flex-item的 换行规则，默认不换行，它有如下值
- nowrap: 不换行，默认行为
- wrap: 换行，第一行在上方
- wrap-reverse: 换行，第一行在下方
- flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap
- justify-content: 定义了flex-item在主轴上的排列方式，它有如下值
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐
- space-around：每个项目两侧的间隔相等
- align-items：定义了flex-item在交叉轴上的排列方式，它有如下值
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline: flex-item的第一行文字的基线对齐
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
flex-item
它包含如下属性
- order：项目的排列顺序，数值越小，排列越靠前，默认为0，可以用于自定义flex-item的位置
- flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大
- flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，默认值为 auto，即项目的本来大小
- flex：flex-grow flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，后两个属性可选
- align-self：允许flex-item有与其他flex-item不一样的对齐方式，可覆盖容器的 align-items属性，默认值为 auto，表示继承容器的 align-items 属性，如果没有容器，则等同于 stretch，可以取的值与 align-items 完全一致
结语
在前端的蛮荒年代，我们多用position，float之类的属性来构建页面，但经历过的人都知道那是一段艰难的岁月，但随着css不断规范化，涌现出的新规范让我们能越来越轻松地搭建页面，我想这就是技术的魅力吧，好啦，就写到这啦，over！
