flex布局小结

每天做个总结吧，坚持就是胜利！

    /**
        @date 2021-07-07
        @description flex布局小结
    */

壹（序）

flex是一种弹性布局，何为弹性，比如下面DOM和样式

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.container {
    width: 400px;
    height: 400px;
    margin: 100px auto;
    background-color: skyblue;
}

.item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
}

是这样子的：

但是将子元素宽度设置为200px后，就会换行：

而设置container元素为flex布局后是这样子，和宽带刚好铺满一样，这就是弹性：

贰（容器与项目）

flex布局中有两个元素需要了解：

容器元素，就是上面的container元素，在这个元素中设置display为flex开启flex布局，容器默认有主轴和交叉轴，主轴默认是横轴，交叉轴默认是竖轴

项目元素，就是上面的item元素，是容器元素下的子项

叁（容器元素相关）

1. flex-direction：设置主轴方向

row：默认值，主轴方向为水平方向，从左边开始
row-reverse：主轴方向为水平方向，从右边开始
column：主轴方向为垂直方向，从上边开始
column-reserve：主轴方向为垂直方向，从下边开始

2. flex-wrap：设置是否换行，正常情况下，在子元素宽度超过容器元素宽度时（如上情况），是一个弹性的减小子元素宽度，通过这个属性可以控制是否是否换行

nowrap: 默认值，不换行
wrap: 换行
wrap-reserve: 换行，并且反转

3. justify-content：项目元素在主轴上的对齐方式

flex-start: 默认值，左对齐
flex-end: 右对齐
center: 中间对齐
space-around: 两侧项目空白部分为中间项目之间的空白部分的一半
space-between: 两侧项目对齐，中间空白部分均分
space-evenly: 所有空白部分均分

4. align-items：项目元素在交叉轴上的对齐方式

stretch：默认值，如果项目元素height为auto或未设置则拉伸到整个容器元素
flex-start：以交叉轴起点对齐
flex-end：以交叉轴终点对齐
center：以交叉轴中心点对齐
baseline：以项目元素的第一行字的baseline对齐

肆（项目元素相关）

1. order：设置项目元素的顺序值，根据此值进行排列，越小排列越靠前，默认为0

2. flex-grow：设置项目元素的放大比例，类似于根据此值分配百分占比，默认为0(即不放大)，比如三个元素的flex-grow分别为1，2，1，那么中间的元素占50%，其他两个占25%

3. flex-shrink：设置项目元素的缩小比例，默认为1，在项目元素整体宽度大于容器元素时，项目元素的缩小根据此值进行计算，如：

<style>
.container {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    background-color: skyblue;
    display: flex;
    justify-content: space-evenly;
}

.item {
    width: 200px;
    height: 100px;
    background-color: pink;
}

.item1 {
    flex-shrink: 3;
}
.item2 {
    flex-shrink: 3;
}
</style>

<div class="container">
    <div class="item1 item">flex-shrink: 3</div>
    <div class="item2 item">flex-shrink: 3</div>
    <div class="item3 item">flex-shrink: 1</div>
    <div class="item4 item">flex-shrink: 1</div>
</div>

此时需要进行200px的缩小，那么会根据所有项目元素的flex-shrink值的总和进行计算，此时为（200 / 8 = 25px），然后进行缩小分配，也就是说item1和item2缩小之后宽度为（200 - 25 * 3 = 125px），而其他两个缩小之后为（200 - 25 * 1 = 175px）

4. align-self：单个项目元素在交叉轴上的对齐方式，可以覆盖align-items，默认为auto，表示继承容器元素的align-items属性，其他值与align-items一样