如何实现CSS中flex布局最后一行左对齐

最新推荐文章于 2024-09-29 17:01:34 发布

好喝的西北风

最新推荐文章于 2024-09-29 17:01:34 发布

阅读量479

点赞数

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

本文链接：https://blog.csdn.net/weixin_43340372/article/details/123430200

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

1. 效果

2. HTML

<div class="container">
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
  <div class="list"></div>
</div>

3. scc

body {
  height: 1000px;
}
.container {
  float: left;
  border: 1px solid #000;
  display: flex;
  width: 290px;
  flex-wrap: wrap;
  justify-content: space-between;
  resize: both;
  row-gap: 10px;
  column-gap: 10px;
}
.list {
  width: 65px;
  height: 65px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);

}

.container::after {
  content: '';
  display: block;
  flex: 1;
}