Diving deep into the core of the HTML & CSS - The Flexbox Layout

1. Diving deep into the core
of the HTML & CSS
#4 The Flexbox Layout

2. @dalibor_gogic
[object Object]

3. The Flexbox Layout

4. The Flexbox Layout (Flexible Box) module aims
at providing a more efficient way to lay out, align and distribute
space among items in a container, even when their size
is unknown and/or dynamic.

5. The flexbox layout is direction-agnostic
as opposed to the regular layouts (block which is
vertically-based and inline which is horizontally-based).

7. .container {
display: flex | inline-flex;
}
https://codepen.io/daliborgogic/pen/VxqLJK

8. .container {
flex-direction: row | row-reverse | column | column-reverse;
}
https://codepen.io/daliborgogic/pen/QrJeEj

9. .container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
https://codepen.io/daliborgogic/pen/vjvBmN

10. (Applies to: parent flex container element)
This is a shorthand flex-direction and flex-wrap properties,
which together define the flex container's main and cross axes.
Default is row nowrap.
flex-flow: <'flex-direction'> || <'flex-wrap'>;
https://codepen.io/daliborgogic/pen/aGPoYg

11. .container {
justify-content: flex-start | flex-end | center | space-between |
space-around | space-evenly;
}
https://codepen.io/daliborgogic/pen/gzZOOX

12. .container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
https://codepen.io/daliborgogic/pen/odJNLB

13. .container {
align-content: flex-start | flex-end | center | space-between |
space-around | stretch;
}
https://codepen.io/daliborgogic/pen/aGPzby

14. .item {
order: <integer>; /* default is 0 */
}
https://codepen.io/daliborgogic/pen/odJgKO

15. .item {
flex-grow: <number>; /* default 0 */
}
https://codepen.io/daliborgogic/pen/GdPJqo

16. .item {
flex-shrink: <number>; /* default 1 */
}
https://codepen.io/daliborgogic/pen/PeXqpb

17. .item {
flex-basis: <length> | auto; /* default auto */
}
https://codepen.io/daliborgogic/pen/PeXqpb

18. This is the shorthand for flex-grow, flex-shrink and flex-basis combined.
The second and third parameters (flex-shrink and flex-basis) are optional.
Default is 0 1 auto.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
https://codepen.io/daliborgogic/pen/PeXqpb

19. .item {
align-self: auto | flex-start | flex-end | center | baseline |
stretch;
}
https://codepen.io/daliborgogic/pen/rvoVob

20. This slide [is] intentionally left blank.