Trail stops in a flexible row

Arrange four trail stops in a flexible row that wraps neatly when the available width is narrow.

Worked example: At 320px, the stops can occupy multiple rows without extending past the page; at 900px, all four fit in one row and keep their listed order.

Rules and constraints

• Link styles.css from index.html.
• Keep exactly four <li class="trail-plan__stop"> items inside <ul class="trail-plan">.
• Use Flexbox for the list, include a visible gap, and let items wrap.
• At 320px, the layout must fit without horizontal overflow; at 900px, the four stops should fit in one row.
• Preserve the order in which the stops appear in the HTML.

What you'll practice

• Making a list a Flexbox container.
• Spacing and wrapping flex items.
• Checking layout constraints at narrow and wide viewport sizes.

Run it

gonomicon fetch fs-week-1/06-01-trail-stops-flex
cd 06-01-trail-stops-flex
gonomicon test
gonomicon submit

Hints

1. The list is the flex container; its direct list items are the flex items.
2. A container that can wrap needs enough space between items and a reasonable starting width for each item.
3. Use display:flex, flex-wrap:wrap, a gap, and a flexible basis that lets two stops fit at 320px and all four fit at 900px.