Template of a responsive page for all screens, based on flex

Flex is an new CSS property to let pages automatically adapt to different screens.

This is a value of the display attribute. CSS has simply added an extra value to an existing property:

Once the flex value has been chosen, other properties can be added to the container.

For inner items, various properties are also added. Including flex-shrink which indicates whether the element can be reduced or not to free up space. flex-shrink: 0 indicates that it should not be reduced.

We want to use these new properties to create the model of a web page, which is responsive and using a minimum of CSS code.

To do this, we must subdivide the page into several sections:

  1. Fullpage is the main container, its two elements are aligned in columns.
  2. The first element, main, and the second, footer are separated by a variable space, depending on the content of the page.
  3. Footer, is always at the bottom of the window, even if the page is almost empty.
  4. Main contains two items arranged in column, header, and middle.
  5. Header has a fixed height, middle a variable height.
  6. Middle contains two elements arranged in a row (default value, therefore not specified). They are separated by a variable space depending on the content.
  7. The first element, content, has a variable width and is placed on the left.
  8. The second, sidebar, on the right, has a fixed width.

This gives a layout corresponding to the following diagram:

Modèle de page flex

The CSS code is very simplified:

<style>
html, body: {
  margin:0;
  padding:0;
}

#fullpage {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

#middle {
  display:flex;
  justify-content:space-between;
}

#header {
  height:100px;
}

#content {
  padding:32px;
}

#sidebar {
  width:200px;
}

#footer {
  min-height:64px;	
  display:flex;
  flex-direction:column;
  justify-content:center;
}
</style>

I have removed from the code of the demonstration all that is not used to the disposition of the elements. The complete code is in the demo page.

If you want to limit the maximum width of the page, you can add these two lines in the #fullpage property:

max-width:1280px;
margin:auto;

Try the demonstration

You can download it and use it as a starting point for a site or an application.

The flex value of display is supported by all recent browsers. It is not by Internet Explorer however. If you want to maximize the views, you need to stay at the classic CSS, so here is a responsive page template for any legacy browser.