CSS Flexbox: Center container with left

This question already has an answer here:

Flex-box: Align last row to grid 22 answers

Targeting flex items on the last row 3 answers

---

Use margin-right: auto; on your last item (using :last-child ) to add a margin that will push your box to the left:

.container {
  padding: 1em;
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
  min-width: calc(300px + 6em);
  max-width: calc(400px + 8em);
  align-items: center;
  justify-content: center;
  background: red;
}
.box {
  width: 100px;
  height: 100px;
  background: #000;
  margin: 1em;
  display: block;
}

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

<h1> try resizing window</h1>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

---

I changed the justify-content to "flex-start" using Chrome's "Inspect" function.

That seemed to produce the results that you want.

链接地址: http://www.djcxy.com/p/76052.html

上一篇: 比较两个字符串与布尔？

下一篇: CSS Flexbox：左边的中心容器