Exact number of flex items per flex line

The Solution at a Glance

• Have the flex container allow flex items to wrap into multiple flex lines with flex-wrap: wrap.
• Set the flex base size of the flex items to control how many flex items get collected into a flex line.
• Account for the gap between flex items when setting the flex base size of flex items.

Allow flex items to wrap into multiple flex lines

By default, the flex container doesn’t let its flex items wrap into new flex lines because of flex-wrap: nowrap. All the flex items will be collected into the same flex line. The number of flex items on the flex line will be the same as the number of flex items you have.

That’s not what we want. We want to let flex items wrap into multiple flex lines, and we want to control the number of flex items per flex line.

Allow the wrapping by setting flex-wrap: wrap on the flex container.

Set the flex base size

The flex base size is the size each flex item “asks for”. This size is used to figure out if the flex item will fit into a flex line or not. Any growing or shrinking will happen later.

You can set the flex base size by setting flex-basis. For example, if you set flex-basis: 10%, the flex base size will be equal to 10 % of the length of the flex line. Ten times ten is one hundred, which means we would be able to collect 10 flex items into a flex line.

Or, if you set flex-basis: 25%, you’ll be able to collect four flex items per flex line.

Note you could set the flex shorthand property instead of setting flex-basis. flex sets flex-grow, flex-shrink, and flex-basis all at the same time.

For example, setting flex: 1 0 25% is the same as separately setting flex-grow: 1, flex-shrink: 0, and flex-basis: 25%.

flex allows an event shorter way of specifying the flex base size. You could set flex: 25%, and it will have the same effect as setting flex: 1 0 25%.

Account for the gap between flex items

The flex container may set a gap between flex items using either the shorthand gap property, or one of the longhand properties column-gap or row-gap, whichever corresponds to the space between flex items.

Gap is non-negotiable. If specified, it must always be present between flex items, and it doesn’t shrink. This means it affects whether a flex item can fit into a flex line.

For example, say you have a 10-pixel gap and want four flex items per flex line. The last flex item asking for 25 % won’t fit, because you’ll have four flex items asking for 25 %, and 3 gaps of 10 pixels each between those. Collectively, they add up to more than 100 %, so the last flex item won’t fit.

You could use a percentage for the gap, or use a calc function in your CSS to make this calculation easier.

You can achieve this layout more easily with Grid

Flexbox layout is really good at letting flex items adapt to the available space by growing and shrinking. But it’s not as good at creating super precise, heavily controlled layouts like this one.

Grid layout lets you achieve the same effect without these manual calculations and accounting for gaps.

It lets you specify the number of columns you’d like to have, and insert a gap without having to worry about giving the columns an exact percentage size.