📌 Flexbox Cheat Sheet

1️⃣ The Parent (Flex Container)

Use display: flex or display: inline-flex to enable Flexbox.

.container {
    display: flex; /* or inline-flex */
}

Main Flex Container Properties

Property Values Description
display flex | inline-flex Enables flexbox on the container
flex-direction row | row-reverse | column | column-reverse Defines the main axis direction
justify-content flex-start | flex-end | center | space-between | space-around | space-evenly Aligns items along the main axis
align-items flex-start | flex-end | center | baseline | stretch Aligns items along the cross axis (vertical in a row)
align-content flex-start | flex-end | center | space-between | space-around | stretch Controls spacing of wrapped rows/columns

2️⃣ The Children (Flex Items)

Flex Item Properties

Property Values Description
flex-grow Number (default 0) Controls how much an item grows relative to others
flex-shrink Number (default 1) Controls how much an item shrinks relative to others

3️⃣ Example Layouts

Basic Row Layout

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

Centered Content

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

Equal Width Columns

.item {
    flex: 1;
}

Fixed Sidebar with Flexible Content

.sidebar {
    flex: 0 0 200px; /* Fixed 200px */
}
.content {
    flex: 1; /* Fills remaining space */
}