Understanding Flexbox Model

fauxywhiz.com

Understanding FLEXBOX MODEL by FAUZIYYA MOH'D HAMMAWA

Flexbox model provides for an efficient way to layout, align and distribute space among elemennts within your document- even when the Viewport and the size of your element is unknown.To start using the flexbox model, all you need to do is first define a Flex-container Set a certain parent element to be a flex-container by using display:flex; or display:inline-flex;

For Inline variation. Let's say we are using ul and li to create a bunch of div containers. As soon as you set the display property to flex, the unordered list automaticallly becomes the flex container and the child elements (in this case the list elements li) becomes flex items.

Flex-container properties: 1.Flex-direction, 2.Flex-wrap, 3.Justify-content, 4.Align-items, 5.Align-content, 6.Flex-flow. Know them by heart, it's easy

1.FLEX-DIRECTION: Flex-direction property controls the direction in which the flex-items are laid along the main axis(horizontal). It may take any of 4 values.
a.row b.column c.row-reversed d.column-reversed.
By default, the flex-direction property is set to row and it aligns the flex-items along the main axis.
Try it yourself to see how it works!

1

2

3

4

2.FLEX-WRAP: Flex-wrap controls wrapping of elements.It may take any of 3 values.
a.wrap b.nowrap c.wrap-reversed
Try it yourself to see how it works!

1

2

3

4

5

6

7

3.JUSTIFY-CONTENT: Justify-content property defines how flex-items are laid out on the main axis.
It may take any of 5 values.
a.flex-start b.flex-end c.center d.space-around e.space-between

Try it yourself to see how it works!

1

2

3

4.ALIGN-ITEMS: Align-items property controls the direction in which the flex-items are laid along the cross axis(vertical). It may take any of 5 values.
a.flex-start b.flex-end c.center d.baseline. e.stretch
Try it yourself to see how it works!

1

2

3

5.ALIGN-CONTENT: Align-content property controls how the flex-items are aligned in a multi-line flex container. It may take any of 4 values.
a.flex-start b.flex-end c.center d.stretch.
Try it yourself to see how it works!

1

2

3

6.FLEX-FLOW; flex-flow is a shorthand property which takes flex-direction and flex-wrap values. That is, multiple values declared in one line.
Try it yourself to see how it works!

1

2

3

4

5

Understanding Flexbox model