前言
作为一名前端工程师，掌握flex布局可以说是十分重要的，不论是在面试还是在日常工作中，我们都会接触到flex布局，最近在工作期间，多次使用了flex布局，所以也想到写一篇关于flex布局的文章，便于日后复习，
一、什么是Flex布局？
Flex 是 Flexible(灵活的) Box 的缩写，又称之为”弹性布局“，用于给盒子模型提供灵活性，可以给任意容器指定为弹性布局
.container {
display: flex
}
二、Flex布局的基本概念
在我们了解flex布局之前，我们要知道几个名词，分别是：”容器“、”项目“、”主轴“、”交叉轴“；
所谓容器就是指采用flex布局的元素，例如👆🏻的container就是一个容器，那么他下面的所有子元素自动成为容器成员，成为项目
flex布局的容器存在两根轴：主轴与交叉轴，那么这个是要根据flex-direction(布局方向)的设定来确定哪边是主轴，哪边是交叉轴；主轴开始位置叫main start，结束位置叫main end；交叉轴开始位置叫cross start，结束位置叫cross end
注意：项目默认为行排列，所以横着为主轴，竖着为交叉轴，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、Flex布局的容器属性
在flex布局中，容器具有如下6种属性
属性1. flex-direction
上文有提到过，flex-direction用来设定主轴的方向(项目的排列方向)
.container {
flex-direction:row | row-reverse | column | column-reverse
}
其中：
- row：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为水平方向，起点在下沿
属性2. flex-wrap
flex-warp是决定该容器是否换行的属性
.container {
flex-wrap: nowrap | wrap | wrap-reverse
}
其中：
- nowrap：不换行
默认不换行，项目宽度设置无效，会自适应变换
- wrap：换行，第一行在上
换行宽度正常
- wrap-reverse：换行，第一行在下
属性3. flex-flow
flex-flow为上述两种属性的简写形式，默认值为row|nowrap
.container {
flex-flow: <flex-direction> || <flex-wrap>
}
属性4. justify-content
此属性为项目的对齐方式，与设置的轴方向有关；下面假设轴方向为水平方向 其中：
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等。
属性5. aligin-items属性
此属性定义项目在交叉轴上的对齐方式 其中:
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：项目的第一行文字的基线对齐
单独设置第一个子容器的padding-top，两个容器没有对齐，设置该属性会让第一个项目向下移动，直到两个项目中文本的基线对齐
- stretch（默认值）：如果项目未设置高度或高度为auto，将沾满整个容器的高度
通过我在项目中实践，感觉像justify-content比较常用的有center、space-around和space-between；aligin-item比较常用的有center
属性6. align-content
align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用；align-content的作用和align-items一样，均是改变项目在侧轴的位置，常用有以下几个属性
- flex-start
- flex-end
- center
- space-around
- space-between
属性与justify-content一致，效果即为align-item效果，其中最后两个略有差异
四、Flex布局的项目属性
项目有6种属性分别为：order、flex-grow、flex-shrink、flex-basis、flex、align-self
1. order
order是设置项目的排列顺序，order越小项目排列越靠前
2.flex-grow
用于决定项目在有剩余空间的情况下是否放大，默认不放大
取值：0(不放大，默认)，1(放大)
默认情况
为item 3加上flex-grow:1
3.flex-shink
flex-shink定义了项目的缩小比例，默认为1；如果空间不足，项目一起缩小；
取值：0(不缩小)，1(缩小)
4.flex-basic
用来设置弹性元素宽度，默认为auto，优先级高于width
.item {
flex-basis: 100px;
}
5.flex
flex是上述三种属性的的简写
.item {
flex: flex-grow | flex-shrink | flex-basis
}
flex:auto => 1 1 auto 等分放大缩小
flex:none => 0 0 auto 不放大不缩小
flex:1 => 1 1 0
6.align-self
其作用为让个别项目拥有与其他项目不同的对齐方式，与align-items的属性完全一致
五、加餐
最近在使用flex布局时突然发现，当项目中的内容为纯数字或者字母时会出现不自动换行的情况
通过查阅资料，了解到，遇到这种情况我们可以使用css的word-break进行强制换行
可以看到当我们加入该属性就可以实现换行需求
总结
本文对flex布局进行了一番介绍，以及在项目中使用遇见的问题的解决方式，希望能够帮助到大家~😄
