我有一个简单的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>


当前回答

哦,男孩,我想我找到了一个很好的解决方案与最小的CSS和没有JS。看看吧:

img {width:100%;} li { display: inline-block; width:8em; list-style:none; } ul {text-align: justify;} <ul> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

这里的关键是要记住,我们试图实现的正是text-align: justify所做的!

HTML中的空元素是为了在不改变外观的情况下完美地显示最后一行,但考虑到您试图实现的目标,可能不需要这些空元素。为了在每种情况下实现完美的平衡,您至少需要x-4个空元素,x是要显示的元素数量,或者n-2, n是要显示的列的数量。

其他回答

你不能。Flexbox不是一个网格系统。它没有实现您所要求的功能的语言结构,至少在使用justify-content: space between时是这样。使用Flexbox最接近的方法是使用列方向,这需要设置显式的高度:

http://cssdeck.com/labs/pvsn6t4z(注:不包括前缀)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

然而,只使用列会更简单,它有更好的支撑,不需要设置特定的高度:

http://cssdeck.com/labs/dwq3x6vr(注:不包括前缀)

ul {
  columns: 15em;
}

这个问题用CSS网格解决了,

这个解决方案只适用于你有固定数量的列,即没有。要显示在单行中的元素

->使用网格但不指定行数,随着元素数量的增加,它包装成列并动态添加行,我在这个例子中指定了三列

->你不需要给你的子/细胞任何位置,因为它会使它修复,这是我们不想要的。

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

假设:

你想要4列网格布局与包装 项目的数量不一定是4的倍数

除了第1、5、9项以外,在每一项上都设置左距。如果左边的边距是10px,那么每行有30px的边距分布在4个项目中。项目宽度百分比计算方法如下:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

这是一个体面的工作,涉及flexbox最后一行的问题。

.flex { display: flex; flex-direction: row; flex-wrap: wrap; margin: 1em 0 3em; background-color: peachpuff; } .item { margin-left: 10px; border: 1px solid; padding: 10px; width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4); background-color: papayawhip; } .item:nth-child(4n + 1) { margin-left: 0; } .item:nth-child(n + 5) { margin-top: 10px; } <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>

有一种没有flexbox的方法,尽管您需要满足以下条件。1)容器有填料。2)项目是相同的大小,你确切地知道你想要多少每行。

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

容器右侧较小的填充允许每个列表项右侧的额外填充。假设与列表对象相同的父对象中的其他项被填充了0 5%,它将与它们齐平。你也可以调整百分比到你想要的幅度,或者使用计算px值。

当然,你也可以使用n -child (IE 9+)来删除每第三个框上的空白。

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