- Flexbox has two sections. The container and the items.
Flex container, the parent element in which flex items are contained. A flex container is defined using the
inline-flex values of the
display property.Flex item
Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.
2. Flexbox downsides
The use of flexbox can increase the page loading time if you have a larger project. Also, browser compatibility can be an issue.
flex-directionproperty establishes the main axis.
justify-contentproperty defines how flex items are laid out along the main axis on the current line.
align-itemsproperty defines the default for how flex items are laid out along the cross axis on the current line.
align-selfproperty defines how a single flex item is aligned on the cross axis, and overrides the default established by
- Flexbox Playground — https://demo.agektmr.com/flexbox/
Flexbox Playground lets you play around with all the propert values.
2. Flexy Boxes — http://the-echoplex.net/flexyboxes/
Flexy Boxes was very similar with Flexbox Playground. It just had different CSS and less boxes.
3. FlexBox Property Demonstration — http://codepen.io/justd/pen/yydezN
This tutorial was honestly the best tutorial because it showed the entire code and allowed you to play around with a lot of different properties and you are allowed to change the code.
Summary: These tutorials really helped me understand each property of flexbox by walking through every property and allowing me to play around with the properties.