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..

    Only show limiited div's depending on browser width

    How do i make li active in angularJS?

    How to click on and off submenu's using javascript

    How to get only the last ul of specific id on page via CSS :last-child property?

    How to get the textarea to be same height as row

    how to print no blur content over a blurred div

    How to remove the shadow effect of textbox in CSS? [closed]

    How to add CSS stylesheet to aspx.vb table

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    how to change the background color of first row in html table and all other rows alternate color

    How to show a title in the border of a div [duplicate]

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    How browser auto resize website to mobile browse?

    How to position div element right below and left-aligned to another div

    How to center field_with_errors class

    How can I style the n-th div with CSS

    How can I include an element within a div without using html?

    How can I stop my cursor changing to a vertical arrow over text?

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    How much time should I put into validating my HTML and CSS?

    How to keep DIV from overlapping?

    how do you add footer? like all right's reserved for a CSS design?

    How to draw an inner div over an outer div using css?

    How to display Highcharts in rows (5)

    How to transform xPath to CSS Selector

    How do I modify this script to use different colors?

    how to crop images that has any size using css

    How do i get a font to show up smooth like this?

    How to load up CSS files using Javascript?

    How to remove blue underline on text in Chrome - CSS?