Issue
I'm trying to see if this is possible with flexbox. I'm trying to accomplish 2 things:
- Have div container width be 60% and another 40% (so only 2 items per row making 100%)
- Each row will reverse (so first row is 60%/40%, then next row would be 40%/60%)
My setup is as follows (The items will always be equal so in this case 6 items, a total of 3 rows)
.ImageContainer {
display: flex;
flex-wrap: wrap;
}
.ImageItem {
border:1px solid #000000;
}
.ImageItem:nth-child(even) {
width: 60%;
}
.ImageItem:nth-child(odd) {
width: 40%;
}
<div class="ImageContainer">
<div class="ImageItem">1</div>
<div class="ImageItem">2</div>
<div class="ImageItem">3</div>
<div class="ImageItem">4</div>
<div class="ImageItem">5</div>
<div class="ImageItem">6</div>
</div>
Solution
Use selectors as follows for the flex children. The ":nth-child(4n+x)" will select the children in steps of four with the corresponding "x" offset:
html,
body {
margin: 0;
}
.ImageContainer {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.ImageItem {
border: 1px solid #ccc;
height: 60px;
box-sizing: border-box;
}
.ImageItem:nth-child(4n+1),
.ImageItem:nth-child(4n+4) {
width: 60%;
}
.ImageItem:nth-child(4n+2),
.ImageItem:nth-child(4n+3) {
width: 40%;
}
<div class="ImageContainer">
<div class="ImageItem"></div>
<div class="ImageItem"></div>
<div class="ImageItem"></div>
<div class="ImageItem"></div>
<div class="ImageItem"></div>
<div class="ImageItem"></div>
<div class="ImageItem"></div>
<div class="ImageItem"></div>
<div class="ImageItem"></div>
<div class="ImageItem"></div>
</div>
Answered By - Johannes
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.