FlexBox

  1. 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 flex or 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.

Axes

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.

3. Properties

  • The flex-direction property establishes the main axis.
  • The justify-content property defines how flex items are laid out along the main axis on the current line.
  • The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
  • The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.

4. Tutorials

  1. 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.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Show your support

Clapping shows how much you appreciated Braden Amorozo’s story.