持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情
Flex 弹性布局，是一种一维的布局模型，它的主要作用是：对齐。（Gird 是二维布局（CSS Grid Layout））
传统的写法相对麻烦，使用 flex 可以一步到位
flex 布局
设置为 flex 布局的容器默认会有两根轴线 — 主轴和交叉轴，默认情况下，容器中的子元素沿着主轴排列，如下图：黄色格子配置flex属性，布局将作用于其子元素。
在谷歌浏览器的调试工具中，将元素设置为 display:flex，可以在右侧可视化选择各个选项
flex 布局属性：
flex 布局的容器有以下属性：
-
flex-direction
- // 主轴的方向，默认值为 row
- row：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿
-
flex-wrap
- // 一行排列不下的时候，容器内元素是否可换行，默认值为 nowrap 不换行
- nowrap：不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
-
flex-flow
- // flex-direction + flex-wrap 属性的简写形式
- 如：
flex-flow: row nowrap
-
justify-content
- // 主轴上元素的对齐方式（默认左对齐）
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：两个项目两侧间隔相等
-
align-items
我们常用的竖直居中就是使用这个属性：
align-items: center- // 交叉轴上的对齐方式
- stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）
- flex-start：起点对齐
- flex-end：终点对齐
- center：中点对齐
- baseline: 第一行文字的基线对齐
-
align-content
- // 多根轴线的对齐方式,一条轴线不会生效
- stretch：轴线占满整个交叉轴（默认值）
- flex-start：起点对齐
- flex-end：终点对齐
- center：中点对齐
- space-between：两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
flex：1
在面试题中有时会出现这个问题。flex 属性用于设置弹性盒模型子元素的空间分配
flex 是 flex-grow、flex-shrink、flex-basis三个属性的简写
设置 flex:1 后进行了均匀分配空间，效果如下：
当有元素的长度增加时：
