Display flex | Flex direction | Flex wrap | Flex flow

Code used in this example - Github

Display flex:

To use flexbox we need flex items, for an item to be flexible, we must define in the parent component a display: flex.

In the following example we have 3 items inside a section:

If we add a display: flex in the section, the content will be flexible with their default values.

NOTE If the element is not a flexible item, the properties cited on this page have no effect.

Flex direction:

The flex-direction property is a sub-property of the flexbox. Is establishes the main-axis, thus defining the direction flex items are places in the flex container.

The flex-direction property accepts four possible values:

• row: same as text direction (default)
• row-reverse: opposite to text direction
• column: same as row but top to bottom
• column-reverse: same as row-reverse top to bottom

Flex wrap:

Code example - Github

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

The flex-wrap property accepts three possible values:

• nowrap: no break line (default)
• wrap: force break line
• wrap-reverse: the same thing as wrap, but cross-start and cross-end are permuted, it's the reverted version.

Example to understand:

Flex flow shorthand:

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

For example, the following codes do the same thing:

{
    flex-direction: row;
    flex-wrap: wrap;
}

or

{
    flex-flow: row wrap;
}

Aligning flex items (Horizontal and vertical)

Code used in this example - Github

You can use flexbox feature to align flex items along the main or cross axis.

Consider the following example:

<div>
    <button>Smile</button>
    <button>Laugh</button>
    <button>Wink</button>
    <button>Shrug</button>
    <button>Blush</button>
</div>

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

It will result in this:

justify-content

This causes an alignment related to main axis(horizontal), in above example we use space-aroud that split items with the same margin between each item.

The justify-content property accepts five different values:

• flex-start (default): items are packed toward the start line
• flex-end: items are packed toward to end line
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items are evenly distributed in the line with equal space around them
• space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

align-items and align-self

align-items causes an alignment related to cross axis(vertical), in above example we use center that centralize all buttons in the center vertically.

We also have the align-self that is the same thing that align-items, the difference is that we must use in the child element to change only 1 item or any number of items for example, and align-items is to use in the parent element to change all child elements.

align-items and align-self example:

div {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

button:last-child {
    align-self: flex-end;
}

It will result in this:

The align-items and align-self property accepts 5 different values:

• flex-start: cross-start margin edge of the items is placed on the cross-start line
• flex-end: cross-end margin edge of the items is placed on the cross-end line
• center: items are centered in the cross-axis
• baseline: items are aligned such as their baselines align
• stretch (default): stretch to fill the container (still respect min-width/max-width)

Flex sizing of flex items

Code used in this example - Github

We can control what proportion of space flex items take up compared to other flex items using:

Flex shorthand property

The flex property is a shorthand property for:

• flex-grow: This property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

For example, if we have 4 items and we defined for the first item flex-grow: 2 and for others flex-grow: 1, the first item will have double size compared to others.

• flex-shrink: This property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

For example, if we have 4 items and we defined for the first item flex-shrink: 2 and for others flex-shrink: 1, the first item will have half of the size compared to others.

• flex-basis: The flex-basis property specifies the initial length of a flexible item. If we have 10 flex items and we defined flex-basis: 500px to the first item,

and viewport width with 1000px, this first item will occupy half of the screen in the viewport width.

The flex property sets the flexible length on flexible items.

Ordering flex items

Code used in this example - Github

We can order flex items using order property. Flex items are ordered of the less to high value.

For example this code:

button:first-child {
    background-color: #ddffdd;

    /* The order of the items is from the smallest to the largest value of `order`,
     the default being `0`, defining here as `1`, this will be the last item. */
    order: 1;
}

button:last-child {
    background-color: #6C7A89;
    
    /* The value can be negative numbers to define before items that contain default order value */
    order: -1;
}

The first item will become the last item and the last item will become the first.