0:13
Flexbox example
0:57
Adding Style
2:34
flex direction
3:28
If you want to layout items on the main axis, use the "justify-content:" property.
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
4:30
If you want to layout items on the cross axis, use the "align-items:" property.
align-items: stretch;
align-items: flex-start;
align-items: center; (one of the most important things you can do in flexbox
5:14
The align-content: property is only used on multline flexbox containers
5:30
flex-wrap: wrap;
5:43
The align-content: property tells the browser how much space to put between lines.
align-content: flex-start aligns the items at the top of the container
align-content: flex-end aligns the items at the bottom of the container
6:58
flex-direction: column;
justify-content: center;
align-items: center;
8:20
flex-shrink: 0
flex-grow: can be used to tell our items to grow bigger.
11:21
For the most part flex-grow, flex-shrink, and the different justify-content, and align-items properties are all you really need to create dynamic and complex layouts in either a row or column based container.
11:33
If you need to override the cross axis aligment of a property you can do that with the align self-self property
aligh-slef: center;
12:15
The order: property allows us to change the order of the items in our flexbox container without actually changing our html
13:45
For the most part you just need to have a container. Give the container a display: flex; Then use the justify-content:, and align-items: properties inside the container to tell flex box how you want to align the items inside the container. Also you can use the flex shrink, grow, and basis properties in order to lay out your individually inside of the flexbox container to grow and shrink as you need.
14:18
flex: A shorthand for the flex shrink, grow, and basis properties is the flex: property.