Flexbox Practice Guide

Learn Flexbox step by step - From Zero to Hero

Part 1 : The Basics

Example 0: Display Flex - The Foundation

display: flex;
flex: 0 0 auto;

Example 1: Display Flex - The Foundation

display: flex;
flex-direction: row;
flex: 1 1 auto; | Growing = True

Example 2: Display Flex - The Foundation

display: flex;
flex-direction: row-reverse;
flex: 1 1 auto;|Growing = True|Shrink = True

Example 3: Display Flex - The Foundation

display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;

Example 4: Display Flex - The Foundation

display: flex;
flex-direction: column;
align-items: center;
flex: 1;

Example 5: Display Flex - The Foundation

display: flex;
flex-direction: column-reverse;
align-items: center;
flex: 1;

Example 6: Display Flex - The Foundation

display: flex;
flex-direction: column;
align-items: flex-end;
flex: 1;

Example 7: Display Flex - The Foundation

display: flex;
flex-direction: row;
justify-content: flex-start;
flex: 0 1 auto;

Example 8: Display Flex - The Foundation

display: flex;
justify-content: center;
align-items: center;
flex: 0 1 auto;

Example 9: Display Flex - The Foundation

display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 auto;

Example 10: Display Flex - The Foundation

display: flex;
justify-content: space-around;
align-items: center;
flex: 0 1 auto;

Example 11: Display Flex - The Foundation

display: flex;
justify-content: space-evenly;
align-items: center;
flex: 0 1 auto;

Example 12: Display Flex - The Foundation

display: flex;
justify-content: space-evenly;
align-items: center;
flex: 0 1 auto;