html - 如何在居中的div中左对齐元素

Question

问题

我目前正在尝试在具有动态宽度的居中包装内左对齐 block 。我无法仅使用 HTML/CSS 使其工作。

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

---

例子

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

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

我希望它看起来像这样:

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

或者，在更大的设备上，像这样:

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

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

---

尝试过的方法

ma​​rgin: 0 auto 将不起作用，因为它需要固定宽度，但我希望每行尽可能多的 .element。

使用 table 似乎也很困难，因为我不知道有多少 .element 可以放在当前设备的一行中。

使用 javascript 当然可以，但我觉得有一个纯 CSS 解决方案。

Answer 1

使用可以使用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>