Understanding the three layouts from the video
The video starts with three recurring needs: giving several items equal importance, managing a changing collection, and placing content beside secondary information. Here is the reasoning behind those layouts, with the clarifications used in the exercises.
Watch the original video on YouTube (in English) ↗
Original video chapters
The container arranges its direct children
Every example starts with a container set to Display: Flex and a few Boxes inside it. The container arranges its direct children. Text inside each Box remains that Box’s content: it does not all become part of the same Flex row.
The settings therefore live in two places. On the container, choose whether to form new rows and how much space to leave between items. On the children, define a starting size, participation in free space and any size limits.
Columns with equal importance
Think of service benefits, highlighted statistics or pricing plans. When items have equal roles, you may want equal-width columns even if one contains more text. Flex alone puts them in a row without guaranteeing equal widths.
In the example, Basis 100% gives each column the same starting size relative to the container’s inner width. On a single row, the items can shrink to share the space. With equivalent settings and Min W 0, the sample produces equal widths even when you add a column.
A width of 25% can be sensible for a specific four-column design. The video explores a different goal: describing behavior that adapts when the number changes. Basis gives a starting size; it does not replace every other layout condition.
Keeping columns side by side on narrow screens can make text hard to read. The exercise therefore enables Wrap from Tablet. With Basis 100%, each column can occupy its own row. Enabling Wrap on Desktop would produce that arrangement in the wide view too.
A changing collection of cards
For activities, projects or collection content, you may not know how many items there will be. The video’s layout looks grid-like, but Flexbox distributes each row’s space independently.
Basis 13rem gives the cards a starting size. With Wrap on the container, a card that does not fit on the row moves to the next one. The number that fits also depends on Gap, the distance between items.
Grow 1 lets the cards share the free space on their own row. If the last row contains two cards rather than three, those two can become wider. Choose that effect deliberately: do not expect columns to stay aligned across separate rows.
Basis is not a guaranteed minimum. Without Wrap, cards can shrink to stay together. Even with Wrap, an item that does not fit by itself may need to shrink. Min W and content also affect the result.
Main content with a side index
An article with an index, or a guide with secondary information, gives its two Boxes different roles. The example starts with Basis 70% and 30%, without a gap between them, leaving more space for the main text in the wide view.
As the screen narrows, 30% may become too small for the index. Min W 13rem protects its width, but that limit alone does not solve the layout: it may leave too little space for the main content.
Wrap lets the two Boxes move onto separate rows when they no longer fit together. Grow 1 on both then allows each to fill its own row. The percentages remain starting sizes: minimums, padding and content can change the final proportions.
Choose the behavior and check it
The three examples use a few properties for different goals. Basis gives a starting size; Grow distributes free space; Min W sets a minimum; Wrap permits new rows. The result depends on their combination and the breakpoint where you set the rules.
When reusing a pattern, test wide, narrow and intermediate widths. Change the amount of text or the number of items too, then compare what happens with your intended result. The video’s values are a starting point for reasoning, rather than a recipe for every kind of content.