CSS – Intro to Flexbox Part 1

This is CSS – intro to flexbox part 1. This post will explain what flexbox is and go over important properties along with examples.

What is flexblox?

Flexbox is a new module in CSS 3 which makes it easy to align elements to one another in different directions and orders. The key idea is to give the container ability to expand and shrink elements so it can use all the space efficiently. Flexbox actually replaces float layouts by using less but more readable and logical code. It changes the way that we build one-dimensional layouts.

Flexbox properties

Now let’s go over important properties of flexbox.

Flex container

It is a container of the flexbox which contains all the elements. Here is how you create the container in CSS

/* create a container */
display: flex;

/* creates a container that behaves like inline */
display: flex-inline;

Flex items

As you can see the above image, all the direct children of the flex container is called flex items.

Main/cross axis

The direction flex items are laid out is called main axis and the perpendicular axis is called cross axis.

Container properties

Container properties include flex-direction, flex-wrap, justify-content, align-items, align-content.

/* flex-direction property specifies which direction the main axis goes */
flex-direction: row | row-reverse | column | column-reverse

/* defines if flex items should wrap to next line
   if there is not enough space in the container
 */
flex-wrap: nowrap | wrap | wrap-reverse

/* defines how the flex items will be aligned along the main axis */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

/* very similar to justify-content. the difference is that this one defines
   how the items willbe aligned along the cross axis not the main axis
*/
align-items: stretch | flex-start | flex-end | center | baseline

/* only applies when there more than 1 row of flex items, 
   controls how the rows should be aligned along the cross axis
*/
align-content: stretch | flex-start | flex-end | center | space-between | space-around

Item properties

Item properties include align-self, order, flex-grow, flex-shrink, flex-basis.

/* very similar to align-items but applies to only one individual flex item */
align-self: auto | stretch | flex-start | flex-end | center | baseline

/* defines the order in which one specific flex items should appear inside container */
order: 0 | <integer>

/* three properties (flex-grow, flex-shrink, flex-basis), 
   help flexbox decide on the width of flex item
*/

flex-grow: 0 | integer
flex-shrink: 1 | integer
flex-basis: auto | length

/* This is short form of the above three properties which is recommended to use */
flex: 0 1 auto

Examples

Here are examples for each property.

HTML Code

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS Code

.container {
  background-color: #ccc;
  padding: 0 300px;
  
  /* creating flex container */
  display: flex;
  
  /* by default flex-direction is row for the container  so you don't need to specify */
  /* flex-direction: row; */
  /* flex-direction: row-reverse; */
  /* flex-direction: column; */
  /* flex-direction: column-reverse; */
}

.item {
  background-color: orangered;
  padding: 30px;
  margin: 20px;
  color: #fff;
  font-size: 40px;
}


flex-direction: row

By default flex-direction is row that you don’t need to specify anything. Note that main axis is horizontal from left to right.


flex-direction: row-reverse

Main axis is still horizontal but it’s from right to left


flex-direction: column

Main axis is now vertical from top to bottom


flex-direction: column-reverse

Main axis is vertical but it’s from bottom to top

There are still many more examples to go through but I will explain them in a different post as this one gets longer.

Leave a Reply

Your email address will not be published.