zoukankan      html  css  js  c++  java
  • 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 {
       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: https://jsbin.com/yulevutodo/edit?html,css,output

    问题

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

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

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

    我的方案放在这边了:https://javascript.shop/2020/01/flex-space-between-last-row-alignment

  • 相关阅读:
    shell脚本判断语句和循环语句
    shell脚本基础
    Linux防火墙(Firewalls)
    RAID磁盘阵列
    LVM逻辑卷创建管理
    vue与django结合使用
    Python使用pyecharts绘制cpu使用量折线图
    Centos8 网络配置静态IP
    Html表格处理
    django的教程相关
  • 原文地址:https://www.cnblogs.com/handboy/p/12142959.html
Copyright © 2011-2022 走看看