问题

我目前正在尝试使用动态宽度使居中包装器中的块左对齐。我不能仅使用HTML / CSS来工作。

这是一个JSFiddle:https://jsfiddle.net/hudxtL8L/



例子

所以目前,它看起来像这样:

|  _____   _____           |
| |     | |     |          |
| |     | |     |          |
| |_____| |_____|          |
|  _____   _____           |
| |     | |     |          |
| |     | |     |          |
| |_____| |_____|          |
|  _____                   |
| |     |                  |
| |     |                  |
| |_____|                  |
|                          |


我希望它看起来像这样:

|       _____   _____      |
|      |     | |     |     |
|      |     | |     |     |
|      |_____| |_____|     |
|       _____   _____      |
|      |     | |     |     |
|      |     | |     |     |
|      |_____| |_____|     |
|       _____              |
|      |     |             |
|      |     |             |
|      |_____|             |
|                          |


或者,在更大的设备上,如下所示:

|       _____   _____   _____     |
|      |     | |     | |     |    |
|      |     | |     | |     |    |
|      |_____| |_____| |_____|    |
|       _____   _____   _____     |
|      |     | |     | |     |    |
|      |     | |     | |     |    |
|      |_____| |_____| |_____|    |
|       _____                     |
|      |     |                    |
|      |     |                    |
|      |_____|                    |
|                                 |


这里重要的是,最后一行不是居中,而是在居中父集中左对齐。可以做到吗?如果可以,怎么做?我尝试了不同的方法,但是所有方法都失败了。



尝试的方法

边距:0自动将无法工作,因为它需要固定的宽度,但我希望每行尽可能多的.element

使用表似乎也很困难,因为我不知道在当前设备的一行中可以容纳多少.element个。

使用javascript当然可以工作,但是我感觉有一个仅CSS的解决方案。

最佳答案

使用可以使用CVS flex实现此布局。

一种方法是定义一个具有固定宽度的容器#content,并以margin: 0 auto居中。

将flex属性应用于#content,使用justify-content: space-between将子元素放置在所需位置。

.elements需要flex-basis: 100px来指定flex容器上下文内的宽度。

您可以使用边距控制元素之间的间距。

参考:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout



#viewport {
  border: 1px solid black;
}
#content {
  width: 250px;
  margin: 0 auto;
  border: 1px dashed blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.element {
  border: 1px dotted black;
  flex-basis: 100px;
  height: 100px;
  margin: 10px; /* optinal, gives you some control on spacing */
}

<div id="viewport">
  <div id="content">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
  </div>
</div>

10-05 20:59
查看更多