A small excursion into the use of flexbox - Alex Soar | Web Developer

Flexbox is a powerful CSS module that makes it easy to align and distribute space among items in a container. Here are the key flex properties used in layout:

Flex Container Properties

display: flex; / display: inline-flex;

Sets the container as a flex container.

   .container {
     display: flex;
   }

flex-direction

Defines the direction of the main axis.
Values: row (default), row-reverse, column, column-reverse.

   .container {
     flex-direction: row; /* items are placed horizontally */
   }

flex-wrap

Defines whether the flex items should wrap onto multiple lines or columns.
Values: nowrap (default), wrap, wrap-reverse.

   .container {
     flex-wrap: wrap; /* items wrap when necessary */
   }

flex-flow

A shorthand for flex-direction and flex-wrap.

   .container {
     flex-flow: row wrap; /* horizontal with wrapping */
   }

justify-content

Aligns the flex items along the main axis.
Values: flex-start (default), flex-end, center, space-between, space-around, space-evenly.

   .container {
     justify-content: space-between; /* evenly distributed */
   }

align-items

Aligns the flex items along the cross axis.
Values: stretch (default), flex-start, flex-end, center, baseline.

   .container {
     align-items: center; /* items are centered along the cross axis */
   }

align-content

Aligns the flex lines along the cross axis if there is extra space.
Values: stretch (default), flex-start, flex-end, center, space-between, space-around.

   .container {
     align-content: space-around; /* lines evenly distributed */
   }

Flex Item Properties

order

Defines the order of the flex items within the container.
Default value: 0.

   .item {
     order: 1; /* item will appear second */
   }

flex-grow

Defines how much the item will grow relative to the other items.
Default value: 0.

   .item {
     flex-grow: 1; /* item will grow to fill available space */
   }

flex-shrink

Defines how much the item will shrink relative to the other items.
Default value: 1.

   .item {
     flex-shrink: 0; /* item will not shrink */
   }

flex-basis

Defines the initial main size of the flex item before free space is distributed.
Default value: auto.

   .item {
     flex-basis: 200px; /* initial size of the item */
   }

flex

A shorthand for flex-grow, flex-shrink, and flex-basis.

   .item {
     flex: 1 0 200px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 200px */
   }

align-self

Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
Values: auto (default), flex-start, flex-end, center, baseline, stretch.

   .item {
     align-self: flex-end; /* item aligned to the end of the cross axis */
   }

Example of Using Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      align-content: space-around;
      height: 100vh;
    }

    .item {
      flex: 1 1 200px;
      margin: 10px;
      padding: 20px;
      background-color: #f0f0f0;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

This example creates a flex container with five flex items aligned and distributed using key Flexbox properties.