我有一个简单的flex-box布局的容器,如:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

现在我想让最后一行中的项目与其他项目对齐。justify-content:之间的空间;应使用,因为网格的宽度和高度是可以调节的。

目前看来

在这里,我希望右下角的项目在“中间一列”中。最简单的方法是什么?下面是一个展示这种行为的小jsfiddle。

.exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); margin-bottom: 10px; } <div class="exposegrid"> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> </div>


当前回答

我修改了Dan Andreasson给出的示例,在元素上使用右边框来创建一个伪gutter。然后,您可以使用第n -child删除所需列网格计数的最后一个子节点上的边框。这里是一个演示https://codepen.io/JacobLett/pen/mdVoroM

/* demo only */ body { margin:0; padding:0; max-width:1024px; margin:0 auto; } .block-list { background: #ccc; border:1px solid #ccc; } .block-list .block-list__item { background: #eee; } /* demo only */ .block-list .block-list__item { min-height: 100px; margin-bottom: 1rem; } @media only screen and (min-width: 900px) { .block-list { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; background-color: #ffffff; margin: 1em auto; } .block-list:after { content: ""; -webkit-box-flex: 1; flex: auto; } .block-list__item { height: 10em; width: 25%; box-sizing: border-box; border-right: 10px solid white; } .block-list-2 .block-list__item { width: 50%; } .block-list-2 .block-list__item:nth-child(2n) { border: none; } .block-list-3 .block-list__item { width: 33.3%; } .block-list-3 .block-list__item:nth-child(3n) { border: none; } .block-list-4 .block-list__item { width: 25%; } .block-list-4 .block-list__item:nth-child(4n) { border: none; } .block-list-5 .block-list__item { width: 20%; } .block-list-5 .block-list__item:nth-child(5n) { border: none; } .block-list-6 .block-list__item { width: 16.66%; } .block-list-6 .block-list__item:nth-child(6n) { border: none; } } <h2>2 column</h2> <div class="block-list block-list-2"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div> <h2>3 column</h2> <div class="block-list block-list-3"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div> <h2>4 column</h2> <div class="block-list block-list-4"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div> <h2>5 column</h2> <div class="block-list block-list-5"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div> <h2>6 column</h2> <div class="block-list block-list-6"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div>

其他回答

我发现了一个有效的解决方案,证明内容也可以居中/空间均匀/等等…(如果你知道单行中的条目数):

HTML:

<section class="container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>

    <p aria-hidden="true"></p>
    <p aria-hidden="true"></p>
    <p aria-hidden="true"></p>
  </section>

<p>标签的数量(它可以是任何其他标签)是每行中的项目数量减1。对于不同的屏幕尺寸,您可以使用媒体查询操作它。

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.flex-item {
  width: 300px;
  height: 300px;
  background: #21BA45;
}

.container > p {
  width: 300px;
  height: 300px;
}

似乎没有人在最后一项上提出弹性增长的解决方案。 这个想法是让你的最后一个伸缩物品占据所有它可以使用的位置:1。

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid > *:last-child {
  flex-grow: 1;
}

注意:这个解决方案并不完美,特别是当你在你的伸缩项目中有居中的元素时,因为它将以可能巨大的最后一个伸缩项目为中心。

可以使用“flex-start”手动添加页边距。它需要一些数学技巧,但绝对容易做到,并且很容易与CSS预处理器(如LESS)一起使用。

请看这个LESS mixin的例子:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

然后它可以很容易地用来显示一个响应式网格布局:

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

这里有一个例子

http://codepen.io/anon/pen/YyLqVB?editors=110

这很老套,但对我来说很管用。我试图达到一致的间距/边距。

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

我可以用容器上的justify-content: space between来做