AI solution for CSS coding question on BFE.dev
16. flex layout 1

One possible CSS solution for this layout is using flexbox:

.container { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; }

.item { flex: 1 1 100px; }

Explanation:

• display: flex; sets the container as a flex container, enabling flexbox properties.
• flex-wrap: wrap; allows items to wrap to the next line if there isn't enough space horizontally.
• justify-content: flex-start; aligns items to the left of the container (horizontal axis).
• align-items: stretch; stretches the items vertically to fill the full height of the container.
• flex: 1 1 100px; sets the item to grow and shrink as needed (flex-grow: 1, flex-shrink: 1), with a minimum width of 100px (flex-basis: 100px).