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;