How to use Flexbox?

Question

I have a layout like this:

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>
<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>

I have to align the divs like: All the divs with "outer" class has to start from new line and all the divs with "inner" class has to be in the same line within "outer" div and the divs with deeper class inside "outer" div should start from new line and the "newLineContent" divs has to be in the same line within "deeper" divs

How can I achieve this using flexbox? or is there any other way to achieve it?

Answer 1

You can do it with Flexbox:

.outer {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
}

.inner:last-child .deeper {
  display: flex;
}

<div class="outer">
  <div class="inner">1.1</div>
  <div class="inner">1.2</div>
  <div class="inner">1.3
    <div class="deeper">
      <div class="newLineContent">1.3.1</div>
      <div class="newLineContent">1.3.2</div>
      <div class="newLineContent">1.3.3</div>
    </div>
  </div>
</div>
<div class="outer">
  <div class="inner">2.1</div>
  <div class="inner">2.2</div>
  <div class="inner">2.3
    <div class="deeper">
      <div class="newLineContent">2.3.1</div>
      <div class="newLineContent">2.3.2</div>
      <div class="newLineContent">2.3.3</div>
    </div>
  </div>
</div>

With your current HTML structure this is the result you get. Flex-items of the .inner:last-child .deeper div can't stretch the full width of the browser because the .deeper div represents one third of the parent element, i.e. the .outer div.

Answer 2

One can do similar without Flexbox, thought Flexbox appears to be the best in this case.

.outer,
.deeper {
  display: flex;
  flex-wrap: wrap;
}
.inner {
  flex-grow: 1;
  padding: 20px 10px;
  border: 1px solid white;
  background: lightgray;
}
.inner:last-child {
  flex-basis: 100%;
}
.newLineContent {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid white;
  background: lightgray;
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>
<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>

---

Updated based on a comment

If the deeper can be a child to any of the inner, and to achieve similar result, one would need either a parent selector, which doesn't exist, or give the inner an additional class for those that contain a deeper.

Another possible workaround could be to use viewport units vw.

.outer,
.deeper {
  display: flex;
  flex-wrap: wrap;
  width: calc(100vw - 40px);   /* 40px to make up for body's margins/scrollbar */
  margin: 0 auto;
}
.inner {
  flex-grow: 1;
  padding: 20px 10px;
  border: 1px solid white;
  background: lightgray;
}
.deeper {
  width: calc(100vw - 62px);   /* 62px is to make up for "inner" padding/border, 22px,
                                  and 40px for body's margins/scrollbar        */
}
.newLineContent {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid white;
  background: lightgray;
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
</div>
<div class="outer">
  <div class="inner"></div>
  <div class="inner">
    <div class="deeper">
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
      <div class="newLineContent"></div>
    </div>
  </div>
  <div class="inner"></div>
</div>

Answer 3

.outer{
  display: flex;
}

Simple as that! How you configure parent and child options, depends on the effect you want to achieve.