CODEWITHSUNDEEP
htmlcssflexbox
Tej
Tej

Reputation: 69

How to keep one box empty using css flex

instead of showing all childs ,How can i show only 3 blue boxes and one empty box in first line, i want 4 boxes in first line with an empty box to the end and 4 boxes in second line, is there any way to do this using css flex or should i move it to two different flex boxes

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 20%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Upvotes: 0

Views: 788

Answers (1)

Rok Benko
Rok Benko

Reputation: 23128

Here you go...

The easiest way to achieve this is to add a class to the box you want to be hidden. You set the background color to transparent. It seems like the box is hidden, but it's actually not (the background color is transparent).

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 20%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

.child.transparent {
  background-color: transparent;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child transparent"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Upvotes: 2

Related Questions