Flexbox

Code

/* Container properties */
.flex-container {
    display: flex;
    flex-direction: row; /* row | column | row-reverse | column-reverse */
    justify-content: space-between; /* Main axis alignment */
    align-items: center; /* Cross axis alignment */
    flex-wrap: wrap; /* Wrap */
    gap: 16px;
}

/* Item properties */
.flex-item {
    flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    order: 2; /* Order */
    align-self: flex-start; /* Individual alignment */
}

/* Fixed width */
.fixed { flex: 0 0 200px; }
/* Adaptive */
.grow { flex-grow: 1; }
/* No shrink */
.no-shrink { flex-shrink: 0; }

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

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.navbar .logo { flex: 0 0 auto; }
.navbar .menu { display: flex; gap: 20px; }

Explanation

Flexbox is suitable for 1D layouts; justify-content controls main axis; align-items controls cross axis alignment.

More CSS Snippets