Flexbox - flex items layout alignment issue

Question

I'm stuck with a problem which arises due to flexbox property. I need to fill up the below space of the first child by shifting third child upward. Is that possible with flexbox? Adding the code here. jsfiddle

HTML/CSS

.flex {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items:flex-start;
  align-content:flex-start;
}

.flex-child {
  height: 200px;
}

.one {
  width: 70%;
  height: 100px;
  background-color: #bada55;
}

.two {
  width: 30%;
  background-color: #f00;
}

.three {
  width: 70%;
  background-color: #0f0;
}

<div class="flex">
  <div class="flex-child one"></div>
  <div class="flex-child two"></div>
  <div class="flex-child three"></div>
</div>

Is it a possibility to structure it differently? Like 1st and 3rd child inside a container? Or is the markup not up for discussion? — Kriszta, Mar 10 '18 at 18:13
@Kriszta yes, you can but in the responsive screen, the second should come under the first child. — Vivekraj K R, Mar 10 '18 at 18:18
See https://stackoverflow.com/a/45200955/2756409 for probably the most comprehensive explanation on this. — TylerH, Mar 10 '18 at 18:37

score 0 · Answer 1 · answered Mar 10 '18 at 18:12

0

Flexbox are unidirectional, you can't do it directly.

To achieve that sort of layout, you need to combine your first and third child, then then apply flex.

<div class="flex">
  <div class="flex-child one">
    <div class="one"></div>
    <div class="third"></div>
  </div>
  <div class="flex-child two"></div>
</div>

Or consider using grid layouts, which is a two dimensional layout

answered Mar 10 '18 at 18:12

Manzur Khan

2,366
4
23
44

There's another issue that for the responsive screen the second child should come under the first one. as per your markup, it won't happen. – Vivekraj K R Mar 10 '18 at 18:17

score 0 · Answer 2 · answered Mar 10 '18 at 18:31

Here you go.

You don't actually need flexbox to achieve this, just good-old position: absolute. ;)

@media only screen and (min-width: 640px) {
  .container {
    position: relative;
  }
}

@media only screen and (min-width: 640px) {
  .child {
    width: 70%;
  }
}

.one {
  background: rgba(255, 0, 0, 0.2);
}

.two {
  background: rgba(0, 0, 255, 0.2);
}
@media only screen and (min-width: 640px) {
  .two {
    width: 30%;
    position: absolute;
    top: 0;
    right: 0;
  }
}

.three {
  background: rgba(0, 128, 0, 0.2);
}

<div class="container">
  <div class="child one">1. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla maxime fuga architecto magni suscipit dignissimos eius modi excepturi eos ab, quia ipsum dolor tenetur reprehenderit incidunt dicta maiores, quibusdam quas! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim magnam ut repellat quibusdam! Dolorem, sunt?</div>
  <div class="child two">2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vel amet ut, iste eveniet quidem neque natus eum ipsum inventore quod veritatis a ipsam eos, non impedit minus, itaque magni? Lorem ipsum dolor sit amet.</div>
  <div class="child three">3. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam voluptatem quibusdam sed consectetur! Impedit numquam voluptatem nemo qui magnam natus suscipit architecto inventore! Voluptatem reprehenderit, aperiam nam laborum hic explicabo!</div>  
</div>

Hey, I highly appreciate the effort. but I'm trying to achieve this by CSS flexbox. we can easily achieve the desired result by using CSS floats but I prefer flexbox. — Vivekraj K R, Mar 10 '18 at 18:35
There are no floats used in the example, just `position: absolute`, which has none of the drawbacks of floats. May I ask why you need to use flexbox when it's not necessary? — Kriszta, Mar 10 '18 at 18:38
Kriszta, I'm using BS4 grid system in which 'row' has 'display: flex' property. for demo purpose, I have created the fiddle without including BS4. — Vivekraj K R, Mar 10 '18 at 18:43

Flexbox - flex items layout alignment issue

2 Answers2