Flex Box Basic

Get out of nightmare that positioning elements with CSS.

What is Flexbox Layout

// todo

Terminology

The box, we call it flex container. All children are flex items.

X-axis of the container called main axis, Y-axis is named cross axis.

Start of main axis is main start, end of the main axis is main end.

Attributes for container:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1. The direction of rows is controlled by flex-direction
2. Keep the row won’t break, using flex-wrap: nowrap;

3. flex-flow is a shorthand of flex-direction and flex-wrap.

    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
   

4. justify-content defines the alignment along the main axis
5. align-items is for cross-axis alignment
6. Similar to how justify-content aligns individual items within the main-axis, align-content aligns space in the cross-axis

Attributes for items

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1. order with a smaller number would be in the front. By default is 0, however, -1 is ahead of 0
2. flex-grow enables the item to grow
3. flex-shrink enables the item to shink
4. flex-basis defines the default size of an element before the remaining space is distributed
5. flex is the shorthand for flex-grow, flex-shrink and flex-basis combined. Default is 0 1 auto
6. align-self allows the default alignment to be overridden for individual flex items

Conclusion

Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

As per https://css-tricks.com/snippets/css/a-guide-to-flexbox/

References

A Complete Guide to Flexbox