flex属性详解
网页布局
最早的时候，网页排版通常是通过 table 元素实现的，在 table 的单元格里使用 align、valign 来实现水平和垂直方向的对齐
后来随着 html 语义化 和 CSS 的发展，浮动布局和定位布局也出现了，还有text-align: center、verticle-align: center 来进行水平居中和垂直居中。依靠这些特性，我们已经可以很方便快捷的实现很多网页。但还是有一定的局限性，如：text-align 和 verticle-align 只能用于行内元素，对于块级元素的布局是无效的
而 flex 布局的出现几乎解决了之前布局方式的所有问题，可以轻松实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。这就是我们今天要学习的 flex 布局
flex 属性（父元素）
如果你已经使用过 flex 布局，那么你应该知道容器和轴的概念。我们先来了解一下 flex-direction 这个特性，然后再来说轴的概念，因为 flex-direction 的参数会影响主轴和交叉轴的方向。
flex-direction（设置排列方向，确定主轴交叉轴）
默认为 row（横向排列），可选参数： row-reverse | column | column-reverse
这个属性的设置会影响后面要说的轴，先留个小坑
子元素竖着排列
display: flex; flex-direction: column;复制代码
子元素从底部往顶部排列
display: flex; flex-direction: column-reverse;复制代码
如何区分主轴和交叉轴
既然我们要确定主轴和交叉轴，那么只要确定了主轴，另外一个就是交叉轴（次轴），毕竟一共只有这两种嘛。
flex-direction: row
flex-direction: column
看到这里，你可能发现了，flex-direction 的参数为row时，所有元素都是横着去排列的，主轴就是横轴；而flex-direction 的参数为column时，主轴就是纵轴。
看到这里，有人就会说：就这？
不要急，这只是个开始，flex 布局还有很多特性可以使用。弄清楚了主轴和交叉轴，下面这两个属性就很简单了。
注意：下面我的例子全部基于 flex-direction: row 的情况下
justify-content（主轴对齐方式）
可选参数：center | start | end | flex-start | flex-end | space-between｜space-around
justify-content: center 居中对齐
justify-content: space-between 子元素沿主轴均匀分布，位于首尾两端的子容器与父容器相切
justify-content: space-around 子元素沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半
align-items（交叉轴对齐方式）
align-items: center | flex-start | flex-end | base-line | stretch
align-items: center 居中对齐
align-items: baseline 基线对齐，这里的 baseline 默认是指首行文字，所有子元素的首行文字的顶部在同一高度
align-items: stretch 子元素沿交叉轴方向的尺寸拉伸至与父容器一致
flex-wrap（设置换行）
flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap: wrap 换行
flex-wrap: wrap-revese 逆序换行
资源是从尾部向头部排列换行
align-content（设置多行内容如何分布）
可选参数：flex-start | center | flex-end | space-between | space-around | stretch
align-content: space-around 等边距均匀分布
align-content: space-between 等间距均匀分布
align-content: stretch 拉伸对齐
flex 属性（子元素）
order（ 改变子元素的排列顺序）
默认值为 0，可选参数：inherit | initial | unset ，可以为负值，数值越小排列越靠前。
举个例子
.father{ // 父元素
display: flex;
}
.left{
order: 3;
}
.middle{
order: -2;
}
.right{}复制代码效果如下
flex-grow（子元素弹性扩展的比例）
可选参数：inherit | initial | unset ，也可以是数字，负值无效，默认为 0
如果所有子元素的 flex-grow 的值都为数字的话，则会把父元素分为若干份，每个子元素根据 flex-grow 的值扩展
举个栗子
.father{ // 父元素
display: flex;
}
.left{
flex-grow: 2;
}
.middle{
flex-grow: 3;
}
.right{
flex-grow: 1;
}复制代码实际效果如下：
这里就可以当作把父元素分为 11 份，middle 元素则占 3 份，left 元素占 2 份，right 元素占 1 份
flex-grow: unset (取消子元素扩展)
取消子元素扩展，有的时候等同于 flex-grow: 0
.father{ // 父元素
display: flex;
}
.left{
flex-grow: 2;
}
.middle{
flex-grow: 3;
}
.right{
flex-grow: 1;
}
.middle.unset{
flex-grow: unset
}复制代码flex-shrink（控制子元素如何收缩）
默认是 1，可选参数：inherit | initial | unset ，可以是 number ，不能为负数
一般写 flex-shrink:0，防止变廋
举个栗子
.father{ // 父元素
display: flex;
}
.left{
flex-shrink: 2;
}
.middle{
flex-shrink: 0.5;
}
.right{
flex-shrink: 1;
}复制代码效果如下
flex-basis 控制基准大小
默认是 auto，可选参数：inherit | initial | unset ，可以是 width 或 height，也可以是百分数，不能为负值
表示在不伸缩的情况下子容器的原始尺寸。横轴为主轴时，表宽度，主轴为纵向时代表高度。
.father{ // 父元素
display: flex;
}
.left{
flex-basis: 10%;
}
.middle{
flex-basis: 100px;
}复制代码align-self (单独定义子元素沿交叉轴排列的方式）
可选参数：flex-start | center | flex-end | baseline | stretch
与 align-items 的使用方式基本相同
align-self: center 居中对齐
.father{ // 父元素
display: flex;
}
.left{
align-self: center;
}
.middle{}
.right{
align-self: flex-end;
}复制代码align-self: stretch 子元素沿交叉轴方向的尺寸拉伸至与父容器一致
.father{ // 父元素
display: flex;
}
.left{
align-self: baseline;
}
.middle{}
.right{
align-self: stretch;
}复制代码flex-flow（flex-direction 与 flex-wrap 的复合属性）
参数： <flex-direction的参数> <flex-wrap的参数>
flex-flow: row，可单独设置主轴方向
flex-flow: wrap，可单独设置换行方式
flex-flow: column nowrap ，也可两者同时设置
如果你已经把上面的所有 flex 布局的特性玩明白了，那么推荐你了解一下 flex 这个简写属性。
*flex（简写属性）
缩写格式，用空格隔开
flex: flex-grow | flex-shrink | flex-basis
flex: 1;
flex: 2 2;
flex: 1 3 10%;
总结
以上就是 flex 的全部属性， 灵活使用 flex 的属性可以实现很多常见的网页，大家快去实战中练习 flex 的使用吧！
作者：唱跳rap篮球
链接：https://juejin.cn/post/7022227856692346910