flex布局

发表于2024-01-16更新于2024-01-16

左右结构flex布局

BP

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.layout-flex{
    width:100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height:1rem;
}
.item1{
    width:20%;
}
.item2{
    width:50%;
}
.item3{
    width:30%;
}

布局

1
2
3
4
5
<div class="layout-flex">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>