Display flex Display inline Display block

1. display: flex

Turns a container into a flex container.

The direct child elements inside it become flex items.

Items can be easily aligned horizontally or vertically.

👉 Example:

.container {
display: flex;
}

This arranges items inside .container in a row by default.

1. display: inline

Makes the element behave inline, meaning it flows with text, doesn’t start on a new line, and only takes as much width as needed.

You cannot set width/height properly on inline elements.

👉 Example:

span {
display: inline;
}

1. display: block

Makes the element a block-level element.

Always starts on a new line and takes full available width by default.

You can set width, height, padding, and margin.

👉 Example:

div {
display: block;
}

1. flex-wrap (wrap)

Works only with display: flex.

Controls whether flex items stay in one line or move (wrap) to the next line if there’s not enough space.

👉 Example:

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

nowrap → (default) all items in one line, shrink if needed.

wrap → items move to the next line.

wrap-reverse → items wrap but in reverse order.