YouTip

Flexbox

Flexbox provides efficient layout alignment and distribution.

.container {
    display: flex;
    justify-content: space-between; /* main axis */
    align-items: center;            /* cross axis */
    gap: 20px;
    flex-wrap: wrap;
}
.item { flex: 1; /* grow equally */ }

Common Patterns

/* Center everything */
.center { display: flex; justify-content: center; align-items: center; }

/* Sidebar layout */
.layout { display: flex; }
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }

Summary

• display: flex enables flexbox on container
• justify-content aligns on main axis
• align-items aligns on cross axis