This week I learned how to use Flexbox. Flexbox stands for Flexible Box Layout. It is a one-dimension layout.

You can use it to lay content in rows or columns. Flexbox is a useful tool to organize, position, and sort elements on the webpage.

Flexbox has some properties that apply to the parent element or the container and others to the child elements or the items.

  1. Flexbox container

The property display: flex transforms the parent element to a flex container.

Example: .container { display: flex; }

a) Direction

We use the property flex-direction to indicate the orientation of the elements or items inside the flex container. The values are columns (or rows, row-reverse, column-reverse).

· The value row or row-reverse will orient the main axis horizontally.

· The value columns or columns-reverse will orient the main axis vertically.

· If the main axis is horizontal, the cross axis will be vertical and vice versa.

Example: .container { flex-direction: columns; }

b) Wrapping

The flex-wrap property determines whether the flex items will be in a single line or multiple lines. The values are nowrap, wrap, wrap-reverse

Example: .container {flex-wrap: wrap;}

c) Alignment

a. Main axis

The property justify-content align the items and distribute the extra space along the main axis inside the container:

The values are flex-start, flex-end, left, right, center, space-between, space-around, space-evenly.

Example: .container { justify-content: flex-start; }

b. Cross axis

The property align-items align the items along the cross axis inside the container. The values are stretch, flex-start, self-start, flex-end, self-end, center, baseline.

Example: .container { align-items: stretch; }

The property align-content is useful when there are multi-line flexible containers. This property aligns flex lines.

The values are flex-start, flex-end, center, stretch, space-between, space-around.

Example: .container { align-content: center; }

2. Flexbox items

The property order controls the order of the items. The default value is zero.

Example: .item#1 { order: 5; }

The property flex-box control the ability of the item to grow. The default value is zero.

Example: .item#1 { flex-grow: 3; }

The property flex-shrink controls the ability of the item to shrink. The default value is one.

Example: .item#1 { flex-shrink: 6; }

The property flex-basis control the length of the items. Each item can have a different size. The default value is auto. The values are auto, initial, inherit, or a number.

Example: .item { flex-basis: auto; }

The shorthand of the properties flex-grow, flex-shrink, and flex-basis is flex. This property controls the length of the items.

You can find more information on the developer Mozilla website.

Web Developer Student @ Devslopes "learn to code"