flex布局常用的场景

最新推荐文章于 2024-07-31 12:16:44 发布

zhooson

最新推荐文章于 2024-07-31 12:16:44 发布

阅读量756

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Zhooson/article/details/87933393

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

实现一个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;
}

完美！！效果图如下
在这里插入图片描述

一个（多个）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;
    }