Mastering the CSS Layout: Flexbox Fundamentals

CSS Flexbox – a layout model for distributing space and aligning items inside a container. It works well when item sizes are unknown or change at runtime, and it is a standard tool for responsive layouts.

What is Flexbox?

Flexbox (Flexible Box Layout) arrived in CSS3. It gives you a straightforward way to lay out, align, and space items in a container without fighting floats or inline-block hacks.

Flex containers and items

Two concepts to keep in mind:

• Flex container: The parent element where you set display: flex; or display: inline-flex;. That turns on Flexbox for its direct children.
• Flex items: The children of a flex container – the elements you are arranging.

Getting started with Flexbox

Start with a container and a few items:

<div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Then enable Flexbox on the container:

.flex-container {
    display: flex;
}

Flex direction

flex-direction controls how items are placed in the container. Values include row, row-reverse, column, and column-reverse. The default is row.

.flex-container {
    display: flex;
    flex-direction: row; /* Default value */
}

Justify content

justify-content aligns items along the main axis (horizontal when flex-direction is row). Options include flex-start, flex-end, center, space-between, space-around, and space-evenly.

.flex-container {
    display: flex;
    justify-content: space-between;
}

Align items

align-items aligns items on the cross axis (vertical when flex-direction is row). Options include flex-start, flex-end, center, baseline, and stretch.

.flex-container {
    display: flex;
    align-items: center;
}

Flex wrap

By default, flex items stay on one line. Use flex-wrap to allow wrapping: nowrap (default), wrap, or wrap-reverse.

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

Flex grow, shrink, and basis

These properties control how items grow, shrink, and set their starting size:

• Flex grow: How much an item can grow when there is extra space. Takes a unitless proportion.
• Flex shrink: How much an item can shrink when space is tight.
• Flex basis: The default size before free space is distributed.

The flex shorthand sets all three at once:

.flex-item {
    flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis */
}

A practical Flexbox example

Here is a simple navigation bar built with Flexbox:

<nav class="navbar">
    <div>Home</div>
    <div>About</div>
    <div>Services</div>
    <div>Contact</div>
</nav>

And the CSS:

.navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: navy;
    color: white;
    padding: 10px;
}

.navbar div {
    margin: 5px;
    padding: 10px;
}

Flexbox handles alignment and spacing with less code than older layout methods, and it adapts well to different screen sizes. Once you are comfortable with the basics, look into ordering, nested flex containers, and how Flexbox works alongside CSS Grid.