➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
What The Flexbox? An Intro to Flexbox
1. An Intro to Flexbox
What the Flexbox?
Lauren Pittenger
@laurenpittenger1
2. What is flexbox?
A layout mode which positions
elements on a page in a way
that is predictable and flexible.
Doesn't use floats and margins
don't collapse.
Many designers find it easier
to use.
2
11. Flex Container Properties
Flex Direction: Row
Defines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
11
12. Flex Container Properties
Flex Direction: Row Reverse
Defines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
12
13. Flex Container Properties
Flex Direction: Column
Defines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
13
14. Flex Container Properties
Flex Direction: Column Reverse
Defines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
14
16. Flex Container Properties
Justify Content: Flex Start
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
16
17. Flex Container Properties
Justify Content: Flex End
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
17
18. Flex Container Properties
Justify Content: Center
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
18
19. Flex Container Properties
Justify Content: Space Between
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
19
20. Flex Container Properties
Justify Content: Space Around
Defines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
20
21. Flex Container Properties
Flex Wrap: Nowrap
Specifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverse
21
22. Flex Container Properties
Flex Wrap: Wrap
Specifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverse
22
23. Flex Container Properties
Flex Wrap: Wrap Reverse
Specifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverse
23
24. Align Items: Flex Start
Flex Container Properties
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
24
25. Flex Container Properties
Align Items: Center
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
25
26. Flex Container Properties
Align Items: Baseline
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
26
27. Flex Container Properties
Align Items: Stretch
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
27
28. Align Content
stretch space-between space-around
flex-start flex-end center
Aligns a flex container’s lines on the cross axis when there is extra space along the
cross axis. It has no effect on a single line of flex items.
align-content: flex-start | flex-end | center | space-between | space-around | stretch
28
29. Align Self
Flex Item Properties
Overrides align-items value. Ignored if flex item’s cross-axis margin is set to auto.
align-self: auto | flex-start | flex-end | center | baseline | stretch
29
32. Order
Flex item Properties
Specifies order items should appear within the flex container. Laid out in ascending
order. Elements with the same order appear in the order of the source code.
order: <integer>
32
33. Resources
CSS Tricks: A Complete Guide to
Flexbox
Joni Bologna Flexbox Cheatsheet
MDN Flexbox Layout
whattheflexbox.com
Flexbox Froggy
David Walsh: Flexbox Layouts
33