Center left aligned elements inside DIV using flexbox

Question

This may be simple and I'm just missing it. I inherited similar markup to below, the width is set on the outer most div and inherited by each child div. The width is dynamic.

I want the pink wrapper div to be the exact width as the row of blue boxes in the first row. I do not know how many blue boxes may be there, nor their widths.

I want the pink wrapper to be centered inside the red/green divs with the blue boxes left aligned.

I made two attempts but neither are working. Any help is appreciated. Below is an picture of what I want to achieve.

.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>

You could use `inline-flex` instead of `flex`, but since you are using `flex-wrap` as well, it is simply impossible to do that without defining a width or using JavaScript. — Quentin Veron, Nov 06 '18 at 17:50

score 0 · Answer 1 · answered Nov 06 '18 at 18:00

To center content using flex you set the container to display: flex and justify-content: center. Its children can then use justify-content: left for left alignment

.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>

score -2 · Answer 2 · answered Nov 06 '18 at 17:52

Try set the width of .wrapper and 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>

The wrapper has to be the same size as the blue boxes. So if there are only 3 blue boxes then the pink background has to be that size and not 90% of the entire wrapper. — Julian Espinosa, Nov 06 '18 at 17:55

Center left aligned elements inside DIV using flexbox

2 Answers2