display: flex;
- justify-content <- moves 'boxes' by the (main/horizontal) axis (Aligns flex items along the main axis)
- commands to use on the property | flex-start (default) | flex-end | center | space-between | space-around|
- align-items <- moves 'boxes' by the y axis (Aligns flex items along the cross axis)
- commands to use on the property | flex-start | flex-end | center | baseline | stretch (default) |
- flex-direction <- moves 'boxes' bases on cols and rows (Defines the direction of the main axis)
- commands to use | row (default) | row-reverse | column | column-reverse |
- order <- You can move the items order (must be selected) (Specifies the order of the flex item)
- ex. (order: 2) this would move item to second position (< integer > (... -1, 0 (default), 1, ...))
- align-self <- aligns an item, overrides align-items (Aligns a flex item along the cross axis, overriding the align-items value)
- commands to use | flex-start | flex-end | center | baselines | stretch |
- flex-wrap <- works similar to box-inline and box (Specifies whether flex items are forced on a single line or can be wrapped on multiple lines)
- commands to use | nowrap (default) | wrap | wrap-reverse |
- flex-flow <- (Shorthand property for flex-direction and flex-wrap)
- commmands to use | __ < flex-direction > < flex-wrap > __ |
- align-content <- (Aligns a flex container's lines within the flex container when there is extra space on the cross-axis)
- commands to use | flex-start | flex-end | center | space-between | space-around | stretch (default)|
- flex-grow <- similar to order but makes individual items larger
- ex. (flex-grow: 2;) this would enlarge the individual item
- flex-basis <- Works similar to width
- (We can use px,%)
(ex:
@media only screen and (min-width: 480px){
}
this would add a seperate css profile to screens below 480px!