I have a flex container with nowrap flow, some items might start as column, how can I manage them? It's like a tree layout. Final result might be like this image:
Here's a stackblitz and snippet:
.container{
display: flex;
width: 100%;
flex-wrap: nowrap;
padding: 5px;
border:2px solid gray;
}
.item{
width: 150px;
flex:1 1 150px;
border: 1px solid green;
margin-right: 2px;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
I can think of CSS grid layout to make this layout easily:
use grid-auto-flow: column
so that the items are placed in the column direction,
use grid-row
and grid-column
to the specific item
elements to achieve the configuration required.
See demo below:
.container{
display: inline-grid; /* inline grid container */
grid-auto-flow: column; /* items placed vertically */
padding: 5px;
border: 2px solid gray;
}
.item:nth-child(2) {
grid-row: 1;
}
.item:nth-child(4),
.item:nth-child(5) {
grid-row: 2;
}
.item:last-child {
grid-row: 4;
}
.item{
width: 150px;
border: 1px solid green;
margin-right: 2px;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>