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

Question

问题

我目前正在尝试在具有动态宽度的居中包装器中左对齐块。我无法仅使用 HTML/CSS 来实现它。

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

---

示例

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

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

我希望它看起来像这样：

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

或者，在更大的设备上，类似这样：

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

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

---

尝试过的方法

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

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

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

Answer 1

使用可以使用CVSflex来实现这个布局。

一种方法是定义一个具有固定宽度的容器#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>

Answer 2

这是你想要的吗：

#content {
  width: 300px;
  border: 1px solid red;
}
#outer {
  text-align: center;
  border: 1px solid green;
}

#inner {
  display: inline-block;
  text-align: left;
  border: 1px solid blue;
  padding: 20px;
}

.element {
  display: inline-block;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin-left: 15px;
}

Answer 3

 #inner {
    display: block;
    text-align: left;
    border: 1px solid blue;
    text-align:center;
    -moz-text-align-last: left;
      text-align-last: left;
  }
  .element:last-child {
     margin-left:20px;
  }

使用 text-align-last:left