常用的flex布局

news/2025/1/11 15:06:44/

文章目录

- 1. flex布局流式布局自动换行
- 2. flex布局流式布局自动换行
- 3. flex横向滚动
- 4. flex 等分
- 5. flex百分比布局
- 6. flex圣杯布局

1. flex布局流式布局自动换行

在这里插入图片描述

<!-- 第一种方式: flex布局流式布局自动换行 每行显示3个 -->
<div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>

.box {margin: 20px auto auto 100px;width: 300px;max-height: 600px;overflow-x: hidden;overflow-y: auto;display: flex;flex-wrap: wrap;justify-content: flex-start;background: #ccc;
}
.box .item {width: 90px;height: 90px;background: orange;margin-right: 15px;margin-bottom: 15px;
}
.box .item:nth-of-type(3n) {margin-right: 0px;
}

2. flex布局流式布局自动换行

在这里插入图片描述

<!-- 第二种方式: flex布局流式布局自动换行 每行显示3个 -->
<div class="box5"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>

.box5 {margin: 20px auto auto 100px;display: flex;width: 300px;height: 200px;background-color: skyblue;flex-wrap: wrap;align-content: flex-start;.item {background-color: orangered;border: 2px solid skyblue;flex: 0 1 33.33%;height: 50px;box-sizing: border-box;}
}

3. flex横向滚动

在这里插入图片描述

<!-- flex横向滚动 -->
<div class="box1"><div class="item1"></div><div class="item1"></div><div class="item1"></div><div class="item1"></div>
</div>

.box1 {margin: 20px auto auto 100px;width: 300px;height: 120px;overflow-x: auto;overflow-y: hidden;display: flex;flex-wrap: nowrap;background: #ccc;
}
.box1 .item1 {width: 90px;height: 90px;background: orange;margin-right: 15px;flex-shrink: 0;
}
.box1 .item1:last-of-type {margin-right: 0px;
}

4. flex 等分

在这里插入图片描述

<!-- flex 等分 -->
<div class="box2"><div class="item1">1/3</div><div class="item1">1/3</div><div class="item1">1/3</div>
</div>

.box2 {margin: 20px auto auto 100px;width: 300px;display: flex;background: #ccc;
}
.box2 div {flex: 1;background-color: palevioletred;margin: 10px 10px 0px 0px;height: 100px;
}
.box2 .item1:last-child {margin: 10px 0px 0px 0px;
}

5. flex百分比布局

在这里插入图片描述

<!-- flex百分比布局 -->
<div class="box3"><div class="item1">70%</div><div class="item2">30%</div>
</div>

.box3 {margin: 20px auto auto 100px;width: 300px;height: 60px;display: flex;background: #ccc;
}.box3 .item1 {flex: 0 1 70%;background-color: violet;
}
.box3 .item2 {flex: 0 1 30%;background-color: yellowgreen;
}

6. flex圣杯布局

在这里插入图片描述

<!-- flex圣杯布局 -->
<div class="box4"><div class="header">header</div><div class="main"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div><div class="footer">footer</div>
</div>

.box4 {margin: 20px auto auto 100px;width: 300px;height: 300px;background: #ccc;display: flex;flex-direction: column;.header,.footer {height: 50px;background-color: bisque;}.main {flex: 1;display: flex;}.left,.right {flex-basis: 50px;background-color: antiquewhite;}.center {flex: 1;}
}