使用flexbox在DIV中居中对齐的元素

Question

这可能很简单，我只是想念它。我继承了与下面类似的标记，宽度设置在最外面的div上，并由每个孩子div继承。宽度是动态的。

我希望粉红色的wrapper div的宽度与第一行的蓝色框的宽度完全相同。我不知道那里可能有多少个蓝色盒子，也不知道它们的宽度。

我希望粉红色的wrapper位于红色/绿色的div内部，蓝色框保持对齐。

我做了两次尝试，但是都没有成功。任何帮助表示赞赏。下面是我想要实现的图像。

.outer {
  width: 275px;
  border: 4px solid red;
}

.parent-wrap {
  border: 3px solid green;
}

.wrapper {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.box {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 5px;
}

/* Attempt 2*/

.outer2 {
  width: 275px;
  border: 4px solid red;
}

.parent-wrap2 {
  border: 3px solid green;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrapper2 {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box2 {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 5px;
}

<h2>Attempt #1</h2>
<div class="outer">
  <div class="parent-wrap">
    <div class="wrapper">
      <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>
  </div>
</div>

<h2>Attempt #2</h2>
<div class="outer2">
  <div class="parent-wrap2">
    <div class="wrapper2">
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
    </div>
  </div>
</div>

Answer 1

要使用flex将内容居中，请将容器设置为显示：flex和justify-content：居中。然后，其子级可以使用justify-content：left进行左对齐

.outer {
  width: 400px; /* Increased width to show centering */
  border: 4px solid red;
}

.parent-wrap {
  border: 3px solid green;
  justify-content: center; /* CENTER */
  display: flex; /* MAKE THIS FLEX */
}

.wrapper {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.box {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 2%;
  flex: 0 0 21%; /* Set box to flex to limit number of boxes per line */
}

<h2>Attempt #1</h2>
<div class="outer">
  <div class="parent-wrap">
    <div class="wrapper">
      <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>
  </div>
</div>

Answer 2

尝试设置width和.wrapper中的wrapper2。

.outer {
  width: 275px;
  border: 4px solid red;
}

.parent-wrap {
  border: 3px solid green;
}

.wrapper {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.box {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 5px;
}

/* Attempt 2*/

.outer2 {
  width: 275px;
  border: 4px solid red;
}

.parent-wrap2 {
  border: 3px solid green;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrapper2 {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box2 {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 5px;
}

.wrapper, .wrapper2 {
  width: 90%;
}

<h2>Attempt #1</h2>
<div class="outer">
  <div class="parent-wrap">
    <div class="wrapper">
      <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>
  </div>
</div>

<h2>Attempt #2</h2>
<div class="outer2">
  <div class="parent-wrap2">
    <div class="wrapper2">
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
    </div>
    </div>
</div>