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.