flex多行多列两端对齐,列不满左对齐

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex多行多列两端对齐,列不满左对齐相关的知识,希望对你有一定的参考价值。

参考技术A 最近遇到布局上要求item两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的 justify-content: space-between;
实现时发现最后一行不能左对齐,而是两端对齐方式。

# 网上查了一些资料,有两种方法可以实现效果:
**1.添加几个空item**(对我来说最有效的,适用于大多数场景)
   根据布局列数添加空item,比如每行最大n列,那么在最后添加n-2个空item即可

```
<html>
<style>
.box

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;



.item

    width: 30%;

    height: 50px;

    background-color: #f1f8ff;

    margin-bottom: 10px;



.placeholder

    width: 30%;

    height: 0px;



</style>

<body>

  <div class="box">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="placeholder"></div>

  </div>

</body>

</html>

```

**2.利于after或者before(适用于每行3或者4列)**

```
.box:after
    display:block;
    content:"";
    width: 30%;
    height:0px;

```

flex布局中同一行内对齐左右两端

之前实现左右对齐都是用的float,但是用float经常会出现浮动影响,有时候清浮动也不能完全消除影响,后来用了flex之后觉得挺好用,不存在这个问题,所以现在都是能用flex就用flex,以下是用flex替代float实现左右对齐的代码
<div class="lh" style="padding: 20px 0;">
    <div style="display: flex;flex-flow: row nowrap;justify-content: space-between;background-color: white;padding: 10px;">
        <span>2017中国服务机器人大赛‘</span>
        <span>2019-11-01</span>
    </div>
</div>

 

最终效果如下(专注实现功能,所以页面比较简陋。。。)

技术图片

 

 

以上是关于flex多行多列两端对齐,列不满左对齐的主要内容,如果未能解决你的问题,请参考以下文章

让CSS flex布局最后一行列表左对齐的N种方法

excel怎么把1行转多列多行

flex布局采用space-around这种方法,但是最后一行如何让他左对齐

flex布局中同一行内对齐左右两端

flex 居中并两端对齐

如何在Latex中插入伪代码