Flexbox 4 Item Layout

Question

I am having trouble getting flex to work with my current layout. I am trying to get the vertical space between 1 and 3 to go away. I realize I could solve this by wrapping these two in a container, but I would prefer not to do that, because I am going to use the order property of flex to move box 2 between box 1 and 3 based on a media query. I have tried using align-self: flex-start on box 1 but this doesn't seem to solve the problem. Any ideas?

.flex-con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 300px;
}
.box {
  width: 40%;
  margin: 0 10px;
  font-size: 20px;
  text-align: center;
}

.one {
  height: 40%;
  border: 2px solid red;
}

.two {
  height: 60%;
  border: 2px solid blue;
}
.three {
  height: 50%;
  border: 2px solid green;
}
.four {
  height: 50%;
  border: 2px solid yellow;
}

<div class="flex-con">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
</div>

Combined height of children in both rows is more than total parent's height. As for me its not good. — Mohammad Usman, Dec 02 '16 at 10:49
Possible duplicate of [Set flexbox children to have different heights to use up available space](http://stackoverflow.com/questions/20977390/set-flexbox-children-to-have-different-heights-to-use-up-available-space) — roberrrt-s, Dec 02 '16 at 10:58
What you're trying to achieve is the masonry effect, which cannot be done alone with Flexbox. https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.k92eeohuz — roberrrt-s, Dec 02 '16 at 10:59
If you just want to get rid off vertical space set `.one` height to 60%, https://jsfiddle.net/Ldfrd8qc/ — David Saginashvili, Dec 02 '16 at 11:13
Or if you can use `relative` positioning on `.three` class :https://jsfiddle.net/Ldfrd8qc/1/ — David Saginashvili, Dec 02 '16 at 11:19

score 1 · Answer 1 · answered Dec 02 '16 at 11:31

Maybe it's not the right answer, but you can have masonry style with flex-direction: column;

* {
  box-sizing: border-box;
}

.flex-con {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 300px;
}

.box {
  font-size: 20px;
  text-align: center;
}

.one {
  flex: 0 0 40%;
  border: 2px solid red;
}

.two {
  flex: 0 0 60%;
  border: 2px solid blue;
}
.three {
  flex: 0 0 50%;
  border: 2px solid green;
}
.four {
  flex: 0 0 50%;
  border: 2px solid yellow;
}

<div class="flex-con">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
</div>

score 0 · Answer 2 · answered Dec 02 '16 at 11:09

0

If you're willing to give up the current order of your items, then you can use flex-direction: column; as seen here. Otherwise, you can achieve the exact layout described using JavaScript.

answered Dec 02 '16 at 11:09

Adam Karacsony

151
1
9

Flexbox 4 Item Layout

2 Answers2