Week 11 - Example 1: CSS Flex

Back

Here is a good guide on CSS-Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Display

display: flex

Item 1
Item 2
Item 3
..text..

display: inline-flex

Item 1
Item 2
Item 3
..text..

Direction

flex-direction: row

Item 1
Item 2
Item 3

flex-direction: column

Item 1
Item 2
Item 3

Position "justify"

justify-content: left;

Item 1
Item 2
Item 3

justify-content: center;

Item 1
Item 2
Item 3

justify-content: right;

Item 1
Item 2
Item 3

justify-content: space-evenly;

Item 1
Item 2
Item 3

justify-content: space-between;

Item 1
Item 2
Item 3

justify-content: space-around;

Item 1
Item 2
Item 3

Position "align"

align-items: start;

Item 1
Item 2
Item 3

align-items: center;

Item 1
Item 2
Item 3

align-items: end;

Item 1
Item 2
Item 3

Gap

gap: 10px;

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3