如何使用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 div s like: All the div s with "outer" class has to start from new line and all the div s with "inner" class has to be in the same line within "outer" div and the div s with deeper class inside "outer" div should start from new line and the "newLineContent" div s has to be in the same line within "deeper" div s

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

Answer 1

.outer{
  display: flex;
}

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

Answer 2

You can do it with the 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 , ie the .outer div.

Answer 3

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>