CSS – Intro to Flexbox Part 3

This is the continuation of CSS – intro to flexbox part 3. Previous posts explained what flexbox is and conceptual things (part 1) and flexbox container properties and examples (part 2). This post will focus on explaining the properties of flex items and examples for them. Since flex items properties are only applicable to the specified item, I posted the HTML, CSS code again for easier understanding. Please pay special attention to the classes such as i2, i4 that are specific to the item.

HMTL Code

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


CSS Code

.container {
  background-color: #ccc;
  display: flex;;
  justify-content: space-between;
  align-items: center;
}

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

.i2 {
  height: 200px;
}


align-self: flex-end

This property aligns the item along the cross axis and at the end of the cross axis. As you see in the example, all the items are located at the center due to align-items: center but only item 4 is located at the end of the cross axis. Note that it might look weird since item 2 has a different height. But the item 2 is still aligned in the center of the cross axis.

.i4 {
    align-self: flex-end;
}


align-self: flex-start

This one is the opposite of the flex-end. You will see the item 4 is now aligned at the start of the cross axis.

.i4 {
    align-self: flex-start;
}


align-self: stretch

This property stretches the flex item to fill the entire container. You will see the height of item 4 is now the same as item 2 since it is the max height item – 200px.

.i4 {
    align-self: stretch;
}


order: <integer>

The order property decides the order of the flex items in the container. By default, all the items have 0 for the order value. In this example, I put -1 to item 4, and now it is the first one to be placed among all the items because -1 < 0 and flexbox always display the item based on the order (lowest order first).

.i4 {
    align-self: flex-end;
    order: -1;
}


What if you put -2 order value to item 3? Since -2 < -1, the item 3 will be placed before the item 4.


flex-grow: <integer>

The flex-grow property indicates the growth of each item. As you can see in the example below, setting flex-grow: 1 made all the items grow as much as possible. The space between the items is because of the margin property.

.item {
  /* skipped all the common properties since they are defined above */
  flex-grow: 1;
}


Note that the number is to indicate the relation compared to others. Just for the above example, it doesn’t matter which number you put because there is only one flex-grow in the item class. Then, what happens if we put flex-grow: 2 to item class such as i2?

.i2 {
  height: 200px;
  flex-grow: 2;
}


Do you see that the item 2 has double width of other items? it’s because the item2 has flex-grow: 2 which is twice of the other items – flex-grow: 1.

flex-basis: <% or px>

You can set a width of a flex item by using flex-basis property. When you deal with flex items, you usually use flex-basis instead of width property. In the example below, the item 2 now occupies 40% of the container.

.i2 {
  height: 200px;
  flex-basis: 40%;
}


flex-shrink: <integer>

Unlike flex-grow, flex-shrink tells the flexbox how the items should shrink when the viewport size change. I didn’t paste the example picture here as it was bit hard to capture the screenshot to indicate the viewport size. However, I still pasted the code example which you can try in the codepen.

.i2 {
  height: 200px;
  flex-basis: 300px;
  flex-shrink: 1;
}


The item 2 has now the fixed width in the container and flex-shrink is allowed (value 1). As you decrease the viewport width you will see the item shrinks. What happens if you disable the shrink? (flex-shrink: 0). Then, you will see that the item 2 will always keep the width of 300px.


flex: <grow> <shrink> <basis>

We have taken a look at the three flex item properties – grow, shrink, basis. However, it is actually more recommended to use flex property instead of others. It is the shorthand of all and very convenient to use. And using flex property instead of those three are is considered a best practice.

.i2 {
  height: 200px;
  flex: 0 0 300px;
}

.i4 {
  order: 2;
  flex: 1;
}

Item 2 doesn’t grow and shrink but has a fixed width of 300px. So the items 1,2,3,5 are rendered first. Then, item 4 has flex-grow enabled so it takes the remaining available space after 1,2,3,5. If you decrease the viewport width on your screen, you will see item 4 will shrink but not item 2. However, if you allow shrinking in item 2 (flex: 0 1 300px) then you will see item 4 shrink first because it has the largest space followed by item 2.


Conclusion

We have completed a long journey of taking a look at basics of flexbox. There are a ton of more stuff and will try to write in different posts.

CSS – Intro to Flexbox Part 2

This is the continuation of the post – css intro to flexbox part 1. Part 1 mostly focused on explaining conceptual things. In this post, I am going to focus on showing examples for each flexbox property. Note that all the other common css code is in part 1. I wrote necessary code only for each property.

justify-content

As explained in part 1 post, justify-content tells you how the flex items should be aligned along the main axis.

justify-content: center

justify-content:center aligns the flex items in the middle of the container but doesn’t do anything for the space between the items because space is defined by the margin.

.container {
    justify-content: center;
}


justify-content: space-between

Space is evenly distributed between flex items. Flexbox automatically calculates all the spaces and positions for each item. Space between the items will be automatically adjusted if the width of the container changes.

.container {
    justify-content: space-between;
}


justify-content: space-around

space around puts the same amount of space for both left and right side of each item. You will see that the space between item 1 and 2 are double of the left space of item 1. The difference between space-between and space-around is that space-between only evenly distributes the space between the items but space-around puts all the space equally for both left/right side.

.container {
    justify-content: space-around;
}


justify-content: space-evenly

space-evenly puts equal space to all sides. As you can see all the spaces are same here. It ensures all the spaces between the elements and side of the elements are same.

.container {
    justify-content: space-evenly;
}


justify-content: flex-end

flex-end puts all the elements to the end. Note that main-axis here is horizontal from left to right that all the elements are placed on the right side.

.container {
    justify-content: flex-end;
}


justify-content: flex-start

This is the default option which places all the items to the start (main axis from left to right) which is left side.

.container {
    justify-content: flex-start;
}


align-items

align-items tells how the flex items should be aligned along the cross axis which is perpendicular to main axis. To show the example, I need to have different height for one of the item.

New HTML Code for align-items example

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

New CSS Code for align-items example

.i2 {
  height: 200px;
}


align-items: flex-start

Note again align-items will align the items along cross axis. flex-start will align all the items to the start of the axis which is top in this case. It might be little hard to see at first time. But take a closer look and you will see all the items are aligned at the top which is the start of the cross axis

.container {
    align-items: flex-start;
}


align-items: flex-end

flex-end now will place all the items at the end of the cross axis which is the bottom.

.container {
    align-items: flex-end;
}


align-items: center

As you can already guess, center will place all the items on the center of the cross axis.

.container {
    align-items: center;
}


align-items: stretch

This is the default mode which stretches all the items to the max of flex items. Since it’s default, you don’t need to specify at all.

.container {
    align-items: stretch;
}


align-items: baseline

baseline will align the items based on the text in the flex item. For the example, let me add another class – increasing the font size.

New HTML Code

note that i4 class is added to 4.

<div class="container">
  <div class="item">1</div>
  <div class="item i2">2</div>
  <div class="item">3</div>
  <div class="item i4">4</div>
  <div class="item">5</div>
</div>
New CSS Class
.i4 {
  font-size: 70px;
}

.container {
  align-items: baseline;
}


What happens if flex-direction: column?

It changes the main axis from top to bottom and cross axis from left to right. In this case, you will see all the items are in the center of horizontal line due to align-items: center (see the code below). justify-content: center makes sure all the items are centered vertically here.

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


Conclusion

We have taken a look at how flex container properties work. I will continue to explain flex item properties in different post. For conceptual explanation, please take a look at part 1. And for more examples of flex items please take a look at part 3

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.