CSS Flexbox style changes based on amount of elements

Question

I am trying to learn Flexbox and I am having a problem with this exercise. The task is to have a div with 2 to 4 div's inside of it. When there are 2 or 3 div's they should be divided equal width and all should be the height of the main div. But when there are 4 div elements inside the main div, then they would be in two rows which contain two div's each.

How can I make this possible? I have tried some on my own but I couldn't get it to work:

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

This is the CSS I have created:

#wrapper{
  width: 100%;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
}

.item{
  min-width: 33%;
}

Picture of how it should look with 2 elements inside the wrapper Div

Picture of how it should look with 3 elements inside the wrapper Div

Picture of how it should look with 4 elements inside the wrapper Div

score 3 · Accepted Answer · answered May 06 '20 at 23:04

Consider nth-child to control this:

#wrapper {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  border:5px solid white;
  box-sizing:border-box;
}


.item {
  flex-grow:1;
}

/* apply when there is 4 items */
#wrapper > :first-child:nth-last-child(4),
#wrapper > :first-child:nth-last-child(4) ~ *{
  flex-basis:50%;
}

body {
  margin:auto;
}

<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>

beat me to it :). I found this question helpful: https://stackoverflow.com/a/12198561/8031815. Also, 2n works more extensibly than 4. — Garrett Motzner, May 06 '20 at 23:11
Thank you very much! Is there a way to do this with hidden elements? — Stephen, May 07 '20 at 08:20

score 2 · Answer 2 · answered May 06 '20 at 23:04

2

Try changing the following to your CSS

.item{
  min-width: 33%;
  flex-grow: 1;
}

.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item {
    min-width: 50%;
}

This only works for CSS3. You could imagine scaling it for more items with additional entries

answered May 06 '20 at 23:04

possum

1,837
3
9
18

Thank you! Is there a way to do this with hidden elements? – Stephen May 07 '20 at 08:21

CSS Flexbox style changes based on amount of elements

2 Answers2