CODEWITHSUNDEEP
cssflexbox
Leah
Leah

Reputation: 365

Flexbox: 3 divs, 2 columns

I'm new to flexbox, so please bear with me. My html:

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

With flexbox, I am trying to achieve the following layout:

the following layout.

What's the simplest way I can achieve this without setting a height for the container? .one is expected to change in height.

Upvotes: 13

Views: 8513

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105853

EDIT .... Late answer , iI leave it since approach looks a little different from other even that it i think it very similar .. but not much choice about the way flex is working :)

you may need to set an height to parent container and childs on first column. order will organize the flow of containers.

codepen to check behavior and how it breaks while windows is reduced or content increased 

.one {
  background: #A1EB88;
}
.two {
  background: #E7AAF6
}
.three {
  background: #F7F467
}
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50vh;/* height is needed to force wrapping */
}
.one,
.three {
  order: -1;/* bring them in front of other(s) */
  height: 50%;/* share the height (if three of them, then put it down to 33.33% to share evenly height avalaible) */
}
.two {
  flex: 1;/* equals height:100%; it will fill entire height */
  width: 200px;/* here your fixed width */
}
<h1>test it also in full page mode </h1>
<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

Upvotes: 2

Nick
Nick

Reputation: 3281

You can achieve this by setting flex-direction to column.

As requested, the width of the second div is static. I am using calc for the other 2 divs.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
.one,
.three {
  flex: 0 0 50%;
  background: cyan;
  width: calc(100% - 100px);
}
.two {
  flex: 0 0 100%;
  order: 1;
  background: moccasin;
  width: 100px;
}
.three {
  background: tomato;
}
<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

Upvotes: 10

Related Questions