欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

flex space-between最后一行对齐问题的解决方案

程序员文章站 2022-03-25 18:09:07
背景 常见的一个图文列表设计,通常是这样的,两端顶着容器,中间的间距平均分,如下图的某东商品列表的设计: 列表是这样自适应的,当视窗足够放多少个商品就放多少个,然后各个商品项目之间的间距平均分。由于每个人的视窗都可能不同,因此所看到的间距或者每一行的个数都会不同。 方案 想到这种设计,我们学过fle ......

背景

常见的一个图文列表设计,通常是这样的,两端顶着容器,中间的间距平均分,如下图的某东商品列表的设计:

flex space-between最后一行对齐问题的解决方案

列表是这样自适应的,当视窗足够放多少个商品就放多少个,然后各个商品项目之间的间距平均分。由于每个人的视窗都可能不同,因此所看到的间距或者每一行的个数都会不同。

方案

想到这种设计,我们学过flex就知道,非常像flex的justify-content: space-between的效果,因此我们自然这样实现:

.flex {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.demo1 > .flex__item {
  flex-basis: 200px;
  margin-top: 1rem;
  text-align: center;
  box-sizing: border-box;
}

.demo1 > .flex__item img {
  width: 100%;
}  

 

<ul class="flex demo1">
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
  <li class="flex__item">
    <img src="http://via.placeholder.com/100" />
    <p>
      图片
    </p>
  </li>
</ul>

demo:

flex space-between最后一行对齐问题的解决方案

问题

我们看到效果,最后一行不正确,应该向左对齐才对。

大家有什么好的解决方案(为了保证兼容性,所以不希望用grid等)吗?

我有一个方案,但是总感觉不是最佳的,希望大家先自己想想,然后再看我的方案,免得被我带偏了,若有不错的方案,希望告知,多谢!

我的方案放在这边了: