CSS FlexBox

The CSS flex (display property's value) is used when we need to create flexible items or to design web page flexibly. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      * {box-sizing: border-box;}
      body {margin: 0;}
      .head {padding: 22px 0; font-size: 1.4em; text-align: center; background: maroon; color: white;}
      .navigation {display: flex; background-color: peru;}
      .navigation a {color: white; padding: 12px 16px; text-decoration: none; text-align: center;}
      .cont {display: flex; flex-wrap: wrap; min-height: 580px;}
      .menu {flex: 20%; background-color: #ccc; padding: 16px;}
      .content {flex: 60%; padding: 16px;}
      .right {flex: 20%; background-color: grey; color: white; padding: 16px;}
      .foot {padding: 22px 0; text-align: center; background: maroon; color: white;}
      @media screen and (max-width: 600px) {.cont, .navigation {flex-direction: column;}}
   </style>
</head>
<body>

   <div class="head">fresherearth</div>
   <div class="navigation">
      <a href="#">LinkOne</a>
      <a href="#">LinkTwo</a>
      <a href="#">LinkThree</a>
      <a href="#">LinkFour</a>
      <a href="#">LinkFive</a>
   </div>
   
   <div class="cont">
   
      <div class="menu">
         <p>----Some Menu----</p>
      </div>
      
      <div class="content">
         <p>Title of the Page...</p>
         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio facere possimus
         vero.</p>
         <p>Some heading...</p>
         <p>Some text...</p>
      </div>
      
      <div class="right">
         <p>----Right Side----</p>
         <p>some links...</p>
         <p>Some texts...</p>
         <p>Some announcement..</p>
      </div>
      
   </div>
   
   <div class="foot">
      <p>Some texts/links...</p>
   </div>

</body>
</html>

Output

fresherearth

LinkOne LinkTwo LinkThree LinkFour LinkFive

Title of the Page...

Some heading...

Some text...

----Right Side----

some links...

Some texts...

Some announcement..

Some texts/links...

Note - If you're on mobile phone, then rotate the phone, either from landscape to portrait or from portrait to landscape, to see the effect or change in layout.

Note - Above example is just a demo about how the FlexBox works in creating flexible layout. You'll learn all about it, starting from next tutorial/topic.

CSS flex Container

To create a flex container, apply the display property with its value as flex, to the element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .cont{display: flex;}
   </style>
</head>
<body>

   <div class="cont">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

Now the DIV whose class name is cont becomes a flex container.

CSS flex Container Properties

flex-direction - define the direction of items in flex container
flex-wrap - wrap items in flex container
flex-flow - define flex-direction and flex-wrap at once
justify-content - align content on main or horizontal axis in flex container
align-content - align the content in flex container
align-items - align the items inside the flex container

CSS flex Items

All direct child elements of a flex container are flex (flexible) items (elements). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .cont{display: flex;}
      .cont > div{border: 1px solid coral; padding: 12px;}
   </style>
</head>
<body>

   <div class="cont">
      <div>A</div>
      <div>
         <div class="content">
            <h2>The FlexBox</h2>
            <p>The <b>flexbox</b> Example</p>
         </div>
      </div>
      <div>
         <div>
            <p>Some text..</p>
         </div>
      </div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

The FlexBox

The flexbox Example

Some text..

CSS flex Item Properties

flex-grow - grow (increase the width of) flex items relatively, in the same flex container
flex-shrink - shrink flex items relatively, in same flex container
flex-basis - set the initial length of flex items in flex container
flex - shorthand of flex-grow, flex-shrink, and flex-basis properties
align-self - align particular item based on the value assigned to it
order - customize the order of flex items, in flex container

CSS Online Test

« Previous Tutorial Next Tutorial »