怎么实现多个盒子两端对齐?

托尼大白菜
  • 106

想要实现这种效果

注:左右两侧的是定格的

图片描述

每个标签就是一个盒子(也可以不用盒子只要能实现这种效果),中间有多少个盒子是用v-for从数组里循坏出来的。

如果一排只有4个用弹性盒子的话可以实现,但是如果有多行之后,使用弹性盒子会将所有的盒子都放在一行变成这样:(这里我设置了弹性盒子超过长度之后换行)

图片描述

如果给每个盒子设置25%的宽度,会变成这样,右端不能对齐

图片描述

如果不用弹性盒子用文本的方式会变成这样

图片描述

设置边距的话同样有一端无法对齐。
我的弹性盒子的样式。

<div class="box">
     <div v-for="item in classes" class="inBox">
            <a href="#"> {{item.name}}</a>
     </div>
</div>
.box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .inBox{
          font-size: 18px;
          a{
            color: rgb(145,145,145);
          }
        }
      }

请问能够仅使用样式实现图一的效果吗?

回复
阅读 5.6k
3 个回答
✓ 已被采纳

将每行最后一个(每行第四个)子元素禁止缩放即可。
样式代码:

.box {
  display: flex;
  flex-flow: row wrap;
}
.inBox {
  flex: 1 0 25%;
}
.inBox:nth-child(4n) {
  flex: 0 0 auto;
}

演示地址:https://codesandbox.io/s/1v2z...

Sven
  • 553

是要这样的吗

图片描述图片描述

.box {
  display: flex;
  flex-wrap: wrap;
  .inBox {
    font-size: 18px;
    width: 25%;
    a {
      color: rgb(145, 145, 145);
    }
  }
}

在inbox设置下
`.box{

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .inBox{
      font-size: 18px;
      width:25%;
  text-align:center;
      a{
        color: rgb(145,145,145);
      }
    }
  }`
宣传栏