display:flex vs display:inline flex

October 23, 2021

Do you know the difference between display:flex and display:inline-flex? When should you use the one over the other?

display:flex

When using display:flex the container element acts like a block level element. The flex container element is as wide as its parent container (the blue background is the flex container element).

example of display:flex being used.

.parent { /* currently not visible due to the flex container element rendering as a block element */ background-color: yellow; border-radius: 8px; width: 300px; } .flex { display: flex; flex-direction: row; background-color: lightblue; padding: 8px; border-radius: 8px; } .flex > * { border: 1px solid black; border-radius: 8px; margin-right: 8px; padding: 8px; } .flex > *:last-child { margin-right: 0; }

display:inline-flex

When using display:inline-flex the flex container element acts like an inline level element. The flex container element is only as wide as its child elements (the yellow background is the parent container element, the blue background is the flex container element).

example of display:inline-flex being used.

.parent { background-color: yellow; border-radius: 8px; width: 300px; } .flex { display: inline-flex; flex-direction: row; background-color: lightblue; padding: 8px; border-radius: 8px; } .flex > * { border: 1px solid black; border-radius: 8px; margin-right: 8px; padding: 8px; } .flex > *:last-child { margin-right: 0; }

When using display:inline-flex you can have two flex container elements side by side if the parent container is wide enough.

example of display:inline-flex being used with multiple flex containers side by side.

.parent { background-color: yellow; border-radius: 8px; width: 350px; } .flex { display: inline-flex; flex-direction: row; background-color: lightblue; padding: 8px; border-radius: 8px; } .flex > * { border: 1px solid black; border-radius: 8px; margin-right: 8px; padding: 8px; } .flex > *:last-child { margin-right: 0; }

If the parent element is not wide enough the second flex container element will move to a second line.

example of display:inline-flex being used with multiple flex containers with not enough width to support both flex containers.

.parent { background-color: yellow; border-radius: 8px; width: 300px; } .flex { display: inline-flex; flex-direction: row; background-color: lightblue; padding: 8px; border-radius: 8px; } .flex:first-child { margin-bottom: 8px; } .flex > * { border: 1px solid black; border-radius: 8px; margin-right: 8px; padding: 8px; } .flex > *:last-child { margin-right: 0; }

When using flex-direction:column with display:inline-flex the flex container element will be as wide as the widest child element.

example of display:inline-flex in combination with flex-direaction:column showing that the parent flex container will grow as wide as the widest child element.

.parent { background-color: yellow; border-radius: 8px; width: 300px; } .flex { display: inline-flex; flex-direction: column; background-color: lightblue; padding: 8px; border-radius: 8px; align-items: flex-start; } .flex > * { border: 1px solid black; border-radius: 8px; margin-bottom: 8px; padding: 8px; } .flex > *:last-child { margin-bottom: 0; }

You can also have flex-direction:column containers side by side when using display:inline-flex

example of display:inline-flex in combination with flex-direaction:column showing that flex containers can be rendered side by side.

.parent { background-color: yellow; border-radius: 8px; width: 300px; } .flex { display: inline-flex; flex-direction: column; background-color: lightblue; padding: 8px; border-radius: 8px; } .flex > * { border: 1px solid black; border-radius: 8px; margin-bottom: 8px; padding: 8px; } .flex > *:last-child { margin-bottom: 0; }

Your inline flex container elements can still render below one another instead of being rendered side by side if the parent container element is not wide enough to fit all the flex container elements side by side.

example of display:inline-flex in combination with flex-direaction:column showing that flex containers will still render below one another if the parent container element is not wide enough to rendere the inline flex container elements side by side.

.parent { background-color: yellow; border-radius: 8px; width: 150px; } .flex { display: inline-flex; flex-direction: column; background-color: lightblue; padding: 8px; border-radius: 8px; } .flex:first-child { margin-bottom: 8px; } .flex > * { border: 1px solid black; border-radius: 8px; margin-bottom: 8px; padding: 8px; } .flex > *:last-child { margin-bottom: 0; }

Profile picture

Written by Tjaart van der Walt who lives and works in Toronto and likes working with web technologies. You should follow them on Twitter