...">
Clever Geek Handbook

How do I use Flexbox?

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 need to align div

like this: Everything div

with the "outer" class must start on a new line, and everything div

with the "inner" class must be on the same line inside the "outer" " div

, and div

with a deeper class inside the" outer " div

must start on a new line , and "newLineContent" div

must be on one line within the "deeper" div

s

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

+3


source to share


3 answers 


.outer{
  display: flex;
}


Just! How you tweak the parent and child parameters depends on the effect you want to achieve.

+1


source


Try the following:



.outer {
  display: flex;
  justify-content: space-between;
}
.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>
Run codeHide result


With your current HTML structure, this is the result you will get. Flex.inner elements: last-child.deeper cannot stretch the full width of the browser because .deeper represents one third of the parent, i.e. Outer div.

+1


source


It is possible to do this without Flexbox, the Flexbox thought seems 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>
Run codeHide result


Updated based on comment

If deeper

can be child of any of inner

, and to achieve a similar result would either require a parent selector that doesn't exist, or give inner

an additional class for those that contain a deeper

.

Another possible workaround might be to use viewport units vw

.

.outer,
.deeper {
  display: flex;
  flex-wrap: wrap;
  width: calc(100vw - 40px);   /* 40px to make up for body 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 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>
Run codeHide result


+1


source






More articles:


All Articles