CSS Layout - Flex

   
   
 css  
 frontend  
Article Series

This article series contain few sections.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Create Basic Layout with Flex Method.

Table of Content

  • Preface: Table of Content

  • 1: Prepare Document and Stylesheet

  • 2: Equal Column Height

  • 3: Page Layout with Sticky Footer

  • Conclusion

Reading

To understand the concept of flex, this article might interest you.

Source Code

You can download the source code of this article series here.

1: Prepare Document and Stylesheet

This basic required kowledge has been provided in previus article. Please read CSS Layout - Overview before continue.

2: Equal Column Height

Now our very first Flex, how do I define two columns with equal height?

Document

<html>
<head>
  <title>Two Columns Flex Example</title>
  <link rel="stylesheet" type="text/css" href="02-flex.css">
</head>
<body>
  <div class="container">

    <aside id="leftside">
      <p>Side</p>
    </aside>

    <main id="mainside">
      <p>Hello world!</p>

      <p>lorem ipsum<br/>lorem ipsum<br/>lorem ipsum<br/>
      lorem ipsum<br/>lorem ipsum<br/>lorem ipsum</p>
    </main>

  </div>
</body>
</html>

Stylesheet

It turned out that this is very simple with flex.

body, html {
  height: 100%;
  padding: 0;
  margin: 0;

  background-color: white;
}

.container {
  display: flex;
  min-height: 100%;
}

#leftside {
  flex: 25%;

  background-color: #2196f3;
  border: 2px dashed #0d47a1;

  margin-right: 5%;

  padding-left: 1rem;
  padding-right: 1rem;
}

#mainside {
  flex: 70%;
  
  background-color: #1976d2;
  border: 2px dashed #0d47a1;

  padding-left: 1rem;
  padding-right: 1rem;
}

Browser Preview

Consider have a look at the result in your favorite browser

CSS: Equal Column Height

How does It Works ?

Just this CSS to make it happened. All summed to be a hundred percent width.

.container {
  display: flex;
}

#leftside {
  flex: 25%;
  margin-right: 5%;
}

#mainside {
  flex: 70%;
}

I also add this below for comfort.

.container {
  min-height: 100%;
}

3: Page Layout with Sticky Footer

And now page layout. How do I make sticky footer inside element?

Document

<html>
<head>
  <title>Page Layout Flex Example</title>
  <link rel="stylesheet" type="text/css" href="03-flex.css">
</head>
<body>
  <div class="container">

    <aside id="leftside">
      <p>Side</p>
    </aside>

    <main id="mainside">
      <header id="top">
        <p>Top</p>
      </header>

      <article id="content">
        <h1>Content</h1>

        <p>Hello world!</p>

        <p>lorem ipsum<br/>lorem ipsum<br/>lorem ipsum<br/>
        lorem ipsum<br/>lorem ipsum<br/>lorem ipsum</p>
      </article>

      <footer id="bottom">
        <p>Bottom</p>
      </footer>
    </main>

  </div>
</body>
</html>

Stylesheet

It also easy with flex.

body, html {
  height: 100%;
  padding: 0;
  margin: 0;

  background-color: white;
}

.container {
  display: flex;
  min-height: 100%;
}

#leftside {
  flex: 25%;

  background-color: #2196f3;
  border: 2px dashed #0d47a1;
  
  margin-right: 5%;
  
  padding-left: 1rem;
  padding-right: 1rem;
}

#mainside {
  flex: 70%;
  
  display: flex;
  flex-direction: column;
  
  background-color: #1976d2;
  border: 2px dashed #0d47a1;
  
  padding-left: 1rem;
  padding-right: 1rem;
}

#top, #bottom, #content {
  text-align: center;
  border: 2px dotted #0d47a1;
}

#top {
  height: 3rem;

  background-color: #64b5f6;
}

#content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  
  flex: 1 0 auto;
  
  background-color: #bbdefb;
}

#bottom {
  height: 3rem;
  
  flex-shrink: 2;

  background-color: #64b5f6;
}

Browser Preview

Consider have a look at the result in your favorite browser

CSS: Page Layout

How does It Works ?

Just this CSS arrangement.

#mainside {
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1 0 auto;
}

Optionally, to prevent the element from shrinking.

#bottom {
  flex-shrink: 0;
}

Conclusion

Flex layout can mindblowingy be achieved without great effort.

We are going to use other layout, so reader can experience the difference. Consider continue reading [ CSS Layout - Grid ].

Thank you for reading.