Flexbox is a one-dimensional layout system. It arranges items in a row or in a column and controls spacing, alignment and sizing with just a few properties. Apply display: flex to the parent and the direct children become flex items.

Basic setup

<div class="lotgrafix-flex">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

.lotgrafix-flex {
    display: flex;
    gap: 20px;
}

Container properties

• flex-direction: sets the main axis. Values: row, row-reverse, column, column-reverse.
• flex-wrap: lets items move to a new line. Values: nowrap, wrap, wrap-reverse.
• justify-content: aligns items along the main axis. Values: flex-start, center, flex-end, space-between, space-around, space-evenly.
• align-items: aligns items along the cross axis. Values: stretch, flex-start, center, flex-end, baseline.
• align-content: aligns multiple lines when flex-wrap is active.
• gap: sets the space between items without using margins.

Item properties

• flex-grow: how much an item grows to fill free space.
• flex-shrink: how much an item shrinks when there is not enough space.
• flex-basis: the starting size of the item before growing or shrinking.
• flex: shorthand for grow, shrink and basis. Example: flex: 1 1 0.
• align-self: overrides align-items for a single item.
• order: changes the visual order of an item. The default is 0.

Center anything horizontally and vertically

.lotgrafix-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Navigation bar with logo on the left and links on the right

.lotgrafix-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Responsive card row that wraps

.lotgrafix-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.lotgrafix-cards .card {
    flex: 1 1 280px;
}

Each card grows to fill the row, never gets smaller than about 280px and wraps to the next line when there is no room.

Sticky footer layout

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

The main element takes all the free space, so the footer stays at the bottom even on short pages.