Introduction

a layout is a rule set or algorithm for structuring visual components, web layouts structure, and position web elements(HTML) for a visually appealing and user-friendly interface. The most common for the web are flex-box and grid; this article will cover the former.

Flex-box?

A one-dimensional layout.
a box, we can replace "box" with "container" for clarity, with flexible boxes as children.
- therefore, it's a container with flexible boxes for children.
- This container can arrange the flexible boxes in a row or column.
These flexible boxes are called flex-items
- flex-items shrink or expand to fit the container space, hence 'flex.'

It's a box with an algorithm for arranging flexible boxes called flex items in a row or column; the flex items shrink or expand to fit the container space.

  flex-box/container: 
    children 1/flex-item-1
        children 2/flex-item-2

making a flex-container

HTML for this tutorial

  <!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">
    <link rel="stylesheet" href="styles.css">
    <title>Weblayout: flex-box</title>
</head>
<body>


    <div class="flex_container">
        <div>flex-item 1</div>
        <div>flex-item 2</div>
        <div>flex-item 3</div>
        <div>flex-item 4</div>
        <div>flex-item 5</div>
        <div>flex-item 6</div>
        <div>flex-item 7</div>
        <div>flex-item 8</div>

    </div>


</body>
</html>

starter CSS

*, *::after, *::before{
   box-sizing: border-box;

}



body{
    padding: 0;
    margin: 0;
}

/* each child of flex container will be 
  200 x 200px, dark blue and have a box-shadow
*/
.flex_container > div {
    width: 200px;
     height: 200px;
     background-color: darkblue;

    box-shadow: 0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%);
}

By default, most HTML elements are block-level elements; each element starts a new row, and the browser adds a margin for the element to take the entire width; hence, by default(without any styling), elements appear as a column.

To make an element a flex container, we use the property display:flex

.flex_container{
    display: flex;
}

Two things happen; first the container is turned into a flex-container, while the container itself remains a block-level element, its children become flexible boxes, and conform to the flex-box algorithm.

Besides being a block-level element, a flex container receives a few special properties(algorithms) for laying out flex-items; this is where the idea of a flex-box model comes in.

Flex-box model

a flex container has two axes (think of it as some form of cartesian plane), the main axis going horizontal and cross axis going vertical; these axes control the transformation of the flex-items(size, position and translation).

Let's simplify it: the main axis is a row, while the cross axis is a column.

These axes and being a flex-item/container give us access to many properties we didn't have before to structure our document, like size, positioning, ordering etc.

Positioning

You can position a flex-item on either axis or both, using the justify-content property to position along the main axis and align-items property to position along the cross-axis. This is called horizontal and vertical alignment.

Add a width and height to the flex-container and background color so we can see alignment in action clearly.

.flex_container{
   ...
    width: 100vw;
    height: 100vh;
    background-color: wheat;
}

Horizontal alignment.

By default, it's flex-start; the flex-items are aligned in order from the start of the container along the main axis.
comment out from flex-item 5 to 8 in the HTML, so elements do not fill the container, and we can see horizontal alignment easily,

  <!-- <div>flex-item 5</div>
        <div>flex-item 6</div>
        <div>flex-item 7</div>
        <div>flex-item 8</div> -->

flex-end is the opposite of flex-start, of course, placing flex-items from right to left.

  justify-content: flex-end;

center - centers the flex-items along the main axis

 justify-content: center;

space-around - place the items evenly in the center, with rest of the space distributed evenly on either end of the items

 justify-content: space-around;

space-between: similar to space-around with no space on either end.

 justify-content: space-between;

Vertical Alignment (align-items)

By default, it's stretch(fill the parent height); if the parent does not have a fixed height, the elements will become as tall as the tallest flex item.

We have almost similar functionality, with flex-end, start, and center but along the cross-axis.

To center the element both vertically and horizontally, we set both align-items and justify-content of a flex-container to center, of course, you can mix and match with any combination, flex-end center, center flex-start etc. The axis are independent.

Centering both horizontally and vertically

.flex_container{
     justify-content: center;
    align-items: center;
    gap: 5px;
}

The gap property puts a space between elements, not necessarily flex-specific, but styling.

You can undo the comment in the HTML file, so we have 8 flex-items

By default, a flex-container is a row layout; elements follow the main axis, or are along the main axis.

But what would happen if we flipped the axis, also called translation in other fields, such as 3d maths. Think about it; the elements will start from top to bottom, forming a column layout; we can achieve that with flex-direction, the default being row.

flex-direction: column;

there are other values, such as column-reverse, row-reverse, to reverse the order of the elements.

If you remember the last rule in the definition about elements shrinking and growing to fit the container, you can notice that it's been happening all along; you can test it by resizing your browser,

These elements are not 200px anymore; to prevent this and the possible overflow of flex-items, we use the wrap property.

Wrap will ensure that any overflowing element, is moved to the next line(a new row is created)/column, and each row/column will contain as many as it can fit.

 flex-wrap: wrap;

There's more to flex-box units than wrap. I will explore them in a separate article along with ordering and nested flex-boxes, or edit this one in a few hours.

By now you have enough information to build cool layouts with flex-box, I do suggest exploring it, and I will be posting articles soon building landing pages.

conclusion

This article is the beginning of multiple HTML, CSS, JavaScript, React, and Svelte articles, as I am taking this blog to that new direction of project-based learning.

In the meantime, if you want to take your HTML, CSS, and JavaScript skills from beginner to writing large applications in a focused path, I have a dedicated digital download with 1v1 help, w/o 1v1 help

If you like the blog and like to support you can buy me a coffee, your support would be highly appreciated.

Thank you for reading.

Introduction to web layouts: flex-box.