CSS Flexbox : How to construct a specific layout


Tags: css,css3,flexbox,fluid-layout

Problem :

Following divs have to be created using flexbox , on condition that 3 of them should be siblings ( can not use two wrappers for each column ).

Anyone have an idea how to make this using pure flex ?

Flex

My current trial:

HTML:

       <div class="meeting-room-wrap">
            <div class="observable-module">
            </div>
            <div class="observable-module">
            </div>
            <div class="active-module">
            </div>    
        </div>

CSS:

.meeting-room-wrap
{
    display: flex;
    flex-direction: row
}
.observable-module
{
    flex-grow:1;
    height: 50%;
    min-width: 50%;
}
.observable-module:nth-child(1) /* div #1 */
{
        background: green;
        order : 1;

}
.observable-module:nth-child(2) /* div #3 */
{
        background: blue;
        order : 3;
}
.active-module  /* div #2 */
{
    flex-grow:1;
    height: 100%;
    min-width: 50%;
    background: red;
    order : 2;

}


Solution :

Wrapped Left Column Option

The left divs in a flex column would the the most obvious approach...absent the given constraint.

.meeting-room-wrap {
  display: flex;
  height: 300px;
  background: #c0ffee;
  width: 80%;
  margin: 1em auto;
}
.observable {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.observable-module {
  flex: 1;
  background: #bada55;
}
.observable-module:nth-child(2) {
  background: rebeccapurple;
}
.active-module {
  flex: 1;
  background: green;
}
<div class="meeting-room-wrap">
  <div class="observable">
    <div class="observable-module">
    </div>
    <div class="observable-module">
    </div>
  </div>
  <div class="active-module">
  </div>
</div>

Flex-column Option ...no extra wrappers required.

* {
  margin: 0;
}
.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  background: #c0ffee;
  width: 80%;
  margin: auto;
  color: red;
  Font-size: 36px;
}
.alpha,
.gamma {
  flex: 0 0 50%;
  width: 50%;
  background: #000;
}
.beta {
  background: #bada55;
  order: 2;
  flex: 0 0 100%;
  width: 50%;
}
.gamma {
  background: plum;
}
<div class="wrap">
  <div class="alpha">ONE
  </div>
  <div class="beta">TWO
  </div>
  <div class="gamma">THREE
  </div>
</div>


    CSS Howto..

    CSS3 Box, How to stop automatic resize with content?

    How to add styles based on whether top element is empty

    How do customize option box that pops up when selectbox is clicked (iOS, HTML, CSS)

    How to select any item preceded by some word in CSS

    How does Mozilla create this animated effect?

    How to merge CSS classes?

    How to fill a text with color using CSS?

    How to override CSS Box Sizing for just one area on page?

    How to draw a CSS petagon with all borders radius?

    I can't make the a Background image display & and can't figure out how to fit text into the image

    How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]

    How to write variable with multiple css properties in Sass

    How do I output HTML form data to PDF?

    How to put borders closer to the text and image and make background gray in CSS?

    How to display a list in horizontal groups of li elements?

    How to Implement different backgrounds on scroll [closed]

    How to make a div to float left/right inside a centered div

    How to write below CSS lines in zend framework 2 syntax?

    how to load a css for Safari only?

    How to get div so it always reaches the bottom?

    In GWT, how to reference an external (obfuscated) CSS in another CSS file

    Show popup after page load

    How to put 2 text input fields in one?

    How to flip which side a progress bar begins at with CSS

    How to create a table with CSS [closed]

    how to stop jquery change css of all the divs onhover of a single div

    How would you resize a image/gif in either CSS or HTML?

    How to make this breed of resizable vertical divider for two divs?

    How to emulate table cells with CSS (without float)?

    How could I join a smaller and a bigger div with rounded edges?