flex布局用法

flex-direction{ //主轴方向
    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。
}
flex-wrap{ //主轴一行满了换行
    nowrap (默认值) 不换行压缩宽度
    wrap    换行
    wrap-reverses 反向换行
}

flex-flow // 前面两个的组合
flex-flow: [flex-direction] [flex-wrap]

justify-content{ //主轴元素对齐方式
    flex-start（默认值）：左对齐（即上面页面展示效果）
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。
}
align-items{ //项目在交叉轴上如何对齐。（如果主轴为水平，那么交叉轴就是垂直）
    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
}
align-content{ //交叉轴行对齐方式 多行
    flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
    flex-end   （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
    center     (每一行)靠着cross线居中对齐//一般就是居中对齐
    space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
    space-around  (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
    strentch      (每一行)伸缩，占满整个高度
}

关于flex:1

flex 是flex-grow、flex-shrink和flex-basis三个属性的缩写。

flex:1 === flex:1 1 0%

flex-grow: flex-grow属性指定了flex容器中剩余空间的多少应该被分配给项目。flex-grow设置的值为扩张因子，默认为0，剩余空间将会按照这个权重分别分配给子元素项目。

flex-shrink: flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩。默认属性值为1，所以在空间不够的时候，子项目将会自动缩小。

flex-basis: flex-basis属性指定了flex元素在主轴方向上的初始大小。如果不使用box-sizing改变盒模型的话，那么这个属性就决定了flex元素的内容的尺寸。如果设置了flex-basis值，那么元素占用的空间为flex-basis值；如果没有设置或者设置为auto，那么元素占据的空间为元素的width/height值。

flex:initial表示默认的flex状态，无需设置，适合小控件元素的分布布局，或者某一项内容动态变化的布局；

flex:0适用场景较少，适合设置在替换元素的父元素上；

flex:none适用于不换行的内容固定或者较少的小控件元素上，如按钮。

flex:1适合等分布局；

flex:auto适合基于内容动态适配的布局；

参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

https://www.cnblogs.com/LangZ-/p/12703858.html