Introduction To The CSS Flexbox

CSS Flexbox Introduction

The CSS flexible box module (flexbox) is used to layout content in either rows or columns, dealing with only one direction at a time. It is used to align and space content inside of a container.

Flexbox is very flexible as the amount of space can be dynamic or unknown, making it useful for designs adjusting to different screen sizes. Flexbox includes multiple CSS properties, some apply to the parent container (e.g. a surrounding The <div>), or the child elements inside.

Flex containers

Back to our project, the <header> links are currently laid out vertically:

• Home
• Dashboard

Update the styles.css file to set display: flex; to the header-menu:

/* styles.css */
.header-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

The display: flex; property defines a flex container. This is applied to a parent element and will affect the direct children. The direct children in our project are the li elements:

• Home
• Dashboard

Flex direction

The menu items are now laid out horizontally as this is the default. This direction is based on a property called flex-direction which is also added to the parent (container). Flex direction arranges the content either horizontally or vertically, referred to as the main axis.

Justify content- main axis

Our menu items are currently aligned to the left of the page. To change this we can add the justify-content property to set the alignment on the main axis. Remember, the main axis is determined by the flex-direction, as we have not set this in our stylesheet it will default to row. This means by adding justify-content we are aligning the items horizontally:

.header-menu {
    display: flex;
    /* add justify-content */
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

Aligning the links to the center of the page:

• Home
• Dashboard

These links were initially aligned to the left because of the default value of flex-start (items aligned to the start of the flex-direction). Other values include:

• flex-end: Aligned to the end of flex-direction.
• space-between Evenly distribute space between items (first item is on the start line, last items is on the end line).
• space-around Equal space around each item. Gaps are not equal since items have space on both the left and right. Meaning double the space for items between the first and last.
• space-evenly Even/equal space between all items.

We will use some of these in an upcoming lesson.

Align items- cross axis

We just covered the justify-content property to set the alignment on the main axis. We can also set the alignment in the opposite direction, the cross axis. The following example aligns items horizontally in the center using flex-direction: row;:

For examples like this where the height of the container is greater than the items, we may also want alignment in the opposite direction (cross axis):

This is set on the parent (container) using align-items:center;. Other values include flex-start which places the items at the beginning of the cross-axis. There is also the opposite which is flex-end:

And stretch:

Properties for child items

The properties covered so far involve applying CSS properties to the parent element. There are also properties we can use on the child items. The flex shorthand combines flex-grow, flex-shrink, and flex-basis, which defaults to 0 1 auto. A simple way to use flex is by setting a single value:

<div style="background-color: #2d877d; display: flex; ">
  <section
    style="
      flex: 1; /* flex  */
      width: 50px;
      margin: 10px;
      color: #000111;
      background-color: aqua;
    "
  >
    1
  </section>
  <section
    style="
      flex: 3; /* flex  */
      width: 50px;
      margin: 10px;
      color: #000111;
      background-color: aqua;
    "
  >
    2
  </section>
</div>

If the flex value on both items was 1 they would remain the same size. However, we have set one of them to a value of 3. This will try to take up three times the available space if possible. This is calculated dynamically and adjusted for different screen sizes/available space.

Individual items can also override the align-items value:

To do this we use the align-self property on the individual item:

<section
  style="
    align-self: flex-start;
    background-color: aqua;
  "
>
  2
</section>

The final property we will cover in this lesson is order. This will control the order of flex items inside a flex container. Overriding the HTML source order.

<div
  style="background-color: #2d877d; display: flex; flex-direction: row"
>
  <section
    style="
      order: 2;
      background-color: aqua;
    "
  >
    1
  </section>
  <section
    style="
      order: 1;
      background-color: aqua;
    "
  >
    2
  </section>
  <section
    style="
      order: 3;
      background-color: aqua;
    "
  >
    3
  </section>
</div>

This can be useful for responsive design. We can re-arrange the order of content to better suit different screen sizes.

This is an introduction to the CSS flexbox and some of the main properties available.

Styling the search and product container

The next lesson covers another layout method called the CSS grid and we will use this to layout the products. Just before we do this, some additional styling to the product container and search.

For this, add classes to the main container and the id for the search:

<!-- index.html -->
<main class="product-wrapper product-grid-wrapper">
  <input type="text" id="search" placeholder="Search products..." />

<!-- dashboard.html -->
<main class="product-wrapper">
  <input type="text" id="search" placeholder="Search products..." />

Both pages use the product-wrapper class to apply common styling. The index page has an additional class of product-grid-wrapper so we can set the grid layout later.

And the following styling to the styles.css file:

/* styles.css- additional styles */
.product-wrapper {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Index Page - Product Grid */
.product-grid-wrapper {
    text-align: center;
}

#search {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem;
    margin: 1rem auto;
    border: 1px solid #dde;
    border-radius: 3px;
}