BFE.devAI解答 - CSS 问题
16. flex layout 1

To fulfill the requirements, we can use flexbox layout with the following CSS:

.container { display: flex; flex-wrap: wrap; width: 100%; }

.item { background-color: #7aa4f0; height: 50px; margin: 5px; flex-grow: 1; flex-shrink: 1; flex-basis: 100px; }

In the container, we set display to flex so that its child items can be arranged using flex properties. We also set flex-wrap to wrap so that items can wrap to the next line if there is not enough space.

In the item, we specify flex-grow to 1, so that items can expand to fill the available space. flex-shrink is also set to 1 to allow items to shrink if there is not enough space. flex-basis is set to 100px to set the initial size of the item before it stretches or shrinks.

With these settings, the items will fill out to 100px width and stretch to fill the available space. If there is not enough space, they will shrink to fit. They will also stack vertically if there is not enough horizontal space.