What is Flex Layout?

The main idea behind the flex layout is to give the container the ability to alter its item's width, height and order to best fill the available space mostly to accommodate to all kind of display devices and screen sizes. A flex container expands items to fill available space or shrinks them to prevent overflow.

The flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based.

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

Basics and Terminology:

Flexbox is a whole module and not a single property, so it includes lot of properties. Some properties are meant to be set on the container known as "flex container" whereas the others are to be set on children known as "flex-items".

If regular layout is based on both block and inline flow directions, the flex layout is based on "flex-flow-directions".

Properties of Flex Container:

display:

This defines a flex container; inline or block depending on the given value. It enables flex- context for all its direct children. Note: CSS Columns have no effect on the flex container.

Syntax:

.class-name {
  display: flex;
}

Before applying flex:

After applying Flex:

<body>
    <h1>A complete guide to Flexbox</h1>
    <div class="container">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
        <p>Four</p>
    </div>
</body>

.container {
     display : flex;
     flex-direction: row;
}
p {
    margin: 5px;
    border: 5px solid black;
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
}

flex-direction:

The elements which are aligned vertically can be changed into another axis direction using this property. flex-direction has 4 properties:

row: (default) - left to right (ltr) and right to left (rtl)
row-reverse - right to left (ltr) and left to right (rtl)
column: same as row but top to bottom.
column-reverse : same as row-reverse but bottom to top.

.class-name {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap:

By default, flex items will all try to fit onto one line. You can change that and allow items to wrap as needed with this property.

nowrap (default) : All flex items will be on one line
wrap: flex items will wrap onto multiple lines from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

.class-name {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow:

This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. The default value is row nowrap.

Syntax:

.class-name {
  flex-flow: column wrap;
}

justify-content:

justify-content aligns all the elements horizontally in the container. The following are the values for justify-content.

Syntax:

.class-name {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

flex-start: (default) This is the default value for justify-content. Items are packed towards the start of the flex-direction.
flex-end: items are packed towards the end of the flex-direction. Output:
start: items are packed towards the start of the writing mode direction.
end: Items are packed towards the end of the writing mode direction.
left: Items are packed towards left edge of the container, unless that doesn't make sense with flex-direction, then it behaves like start.
right: Items are packed towards right edge of the container, unless that doesn't make sense with flex-direction, then it behaves like end. - center: Items are centered along the line. Output:
space-between: Items are evenly distributed in the line; first item is on the start line, last item on the end line. Output:
space-around: Items are evenly distributed in the line with equal space around them. Output:
space-evenly: Items are distributed so that the spacing between any two items (and the space of the edges) is equal. Output:

align-items:

align-items helps elements aligning on vertical side.

Syntax:

.class-name {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

stretch: (default) - stretch to fill the container.
flex-start/start/self-start: Items are placed at the start of the cross axis.
flex-end/end/self-end: Items are placed at the end of the cross axis.
center: Items are placed at the center of the cross-axis.
baseline: Items are aligned such as their baselines align.

align-content:

This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Syntax:

.class-name {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

normal (default): Items are packed in their default position as if no value was set.
flex-start / start: Items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction. -flex-end / end: Items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
center: Items centered in the container
space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: Items evenly distributed with equal space around each line
space-evenly: Items are evenly distributed with equal space around them
stretch: Lines stretch to take up the remaining space

gap, row-gap, column-gap:

The "gap" property explicitly controls the space between the flex items. It applies that spacing only between items not on the outer edges. Syntax:

.class-name {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Properties of Flex Items:

order:

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

Syntax:

.class-name {
  order: 5; /* default is 0 */
}

flex-grow:

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. Syntax:

.item {
  flex-grow: 4; /* default 0 */
}

flex-shrink

This defines the ability for a flex item to shrink if necessary. Syntax:

.class-name {
  flex-shrink: 3; /* default 1 */
}

Sample code containing all above properties:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>A complete guide to Flexbox</h1>
    <div class="container">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
        <p>Four</p>
    </div>
</body>
</html>

.container {
     display : flex;
     flex-direction: row;
     height: 500px;
     justify-content: center;
     align-items: flex-end;
     align-content: flex-end;
     flex-wrap: wrap;
     gap: 100px;
}
p {
    margin: 5px;
    border: 5px solid black;
    width: 100px;
    height: 100px;
    background-color: blue;
    color: white;
}

Reference: MDN Docs

A Complete Guide to Flexbox

Table of contents

What is Flex Layout?

Basics and Terminology:

Properties of Flex Container:

display:

flex-direction:

flex-wrap:

flex-flow:

justify-content:

align-items:

align-content:

gap, row-gap, column-gap:

Properties of Flex Items:

order:

flex-grow:

flex-shrink