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


当前回答

一种技术是插入一些额外的元素(与您希望在一行中拥有的最大元素数量一样多),这些元素的高度为零。空间仍然是分开的,但多余的行塌陷为空:

http://codepen.io/dalgard/pen/Dbnus

body { padding: 5%; } div { overflow: hidden; background-color: yellow; } ul { display: flex; flex-wrap: wrap; margin: 0 -4px -4px 0; list-style: none; padding: 0; } li { flex: 1 0 200px; height: 200px; border-right: 4px solid black; border-bottom: 4px solid black; background-color: deeppink; } li:empty { height: 0; border: none; } *, :before, :after { box-sizing: border-box; } <div> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>

在未来,这可以通过在(n)后使用多个::实现。

其他回答

我修改了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>

这里有一些解决方案,人们建议编写精确的布局css类,使用伪元素伪造最后一项,使用非flexbox方法等。

一个大问题是邻居之间的间隙(大小写对齐的按钮包装到多行)。在这种情况下,你不希望物品相互接触,就需要有空隙。我只是想添加一个适当的解决方案,尊重差距,并适用于任何数量的项目。它也是基于假的最后一个元素的想法,但更普遍。有关详细信息,请参阅代码片段注释。

html { font-size: 1px; } .container { font-size: 16rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .item { background-color: orange; border-radius: 10rem; box-sizing: border-box; color: white; margin-bottom: 10rem; padding: 15rem 10rem; text-align: center; } <!-- Our setup from design (example) used later in calculations: container-width: 100%; (can be any) max-per-row = 4; total = 6; desired-hor-gap = 10rem; (equal to vert. gap) If you go dynamic (drawing html according to the coming data either in a backend template or in a frontend template), you have to calculate and then set exact properties inline. <i> (or any real html element) is needed to set inline styles to arrange the last row properly. "2" in <i> calc function - is 6 % 4 since calc doesn't allow for "%" operator. But in real life you will calculate these numbers in JS or some backend template anyway. Formulas written in elements' calc functions. Seem to be self-descriptive, but the idea is to set for the last fake item the remainder width + hypothetical gaps. --> <div class="container"> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <i style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4 * (4 - 2) + ( 4 - 2 - 1) * 10rem);"></i> </div>

添加一个::之后自动填充空间。不需要污染你的HTML。下面是一个代码依赖体:http://codepen.io/DanAndreasson/pen/ZQXLXj

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

.grid::after {
  content: "";
  flex: auto;
}

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

你还可以这样做:

.exposegrid:last-child {
  margin-right: auto;
}