flex布局常用的场景

实现一个div绝对居中
效果图：

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 300px;
        height: 300px;
        background: yellow;
    }
    .item {
        width: 100px;
        height: 100px;
        background: red;
    }
    
 <div class="wrapper">
      <view class="item"></view>
 </div>

俩端对其，中间均分

    .content {
        display: flex;
        height: 100px;
        background: yellow;
        justify-content: space-between;
        width: 400px;
    }
    .box {
        width: 100px;
        height: 100%;
        background: red;
    }

    <view class="content">
        <view class="box"></view>
        <view class="box"></view>
        <view class="box"></view>
    </view>

左右间距一样，全部均分

    .content {
        display: flex;
        height: 100px;
        background: yellow;
        justify-content: space-around;
        width: 400px;
    }
    .box {
        width: 100px;
        height: 100%;
        background: red;
    }

    <view class="content">
        <view class="box"></view>
        <view class="box"></view>
        <view class="box"></view>
    </view>

一个列表一行三个，多行（下图的有问题）

<view class="content2">
        <view class="box2"></view>
        <view class="box2"></view>
        <view class="box2"></view>
        <view class="box2"></view>
        <view class="box2"></view>
        <!-- <view class="box2"></view> -->
</view>


    .content2 {
        width: 330px;
        display: flex;
        flex-wrap: wrap;
        background: yellow;
        justify-content: space-between;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 15px;
    }

解决方法：（多加几行代码）

.content2:after {
        content: '';
        width: 100px;
        visibility: hidden;
        margin-bottom: 15px;
}

完美！！效果图如下
flex布局常用的场景

一个（多个）div 右对齐

    <view class="content">
        <view class="box"></view>
        <!-- <view class="box"></view> -->
    </view>

    .content {
        display: flex;
        height: 100px;
        background: yellow;
        justify-content: flex-end;   
        width: 400px;
    }
    
    .box {
        width: 100px;
        height: 100%;
        background: red;
        margin-left: 10px;
    }