Flexbox in one line

Read first Task 16

display:flex puts children in a row; gap spaces them without margins.

Definition and example

Flexbox is a one-dimensional CSS layout system: a parent arranges its direct children along a row or a column. For example, a row of two labels can be spaced with the parent’s gap property, keeping equal space between neighbours without adding margins to each child. Flexbox is useful for menus and toolbars; choose Grid when you need to control rows and columns together.

HTML & CSS 1 automatic check CSS styling

Code editor Ctrl + Enter runs

<!-- TASK flexbox-in-one-line-06: Which value makes an element a flex container?
     STEPS: Read the explanation. Change one relevant line at a time, then run the code and compare the result with the check on the right. -->
<style>
  .row { /* TODO: write the required display declaration here. */ gap:12px; }
</style>
<div class="row"><span>A</span><span>B</span></div>

Run your code to see the output and the checks.

Your result

Submit your code to see results

Write your code in the middle column and press Run code.

Checks on this task:

The content of “style” must include “display: flex”.

The task and step-by-step instructions are written as comments at the top of the editor. Change one relevant line, run it, and compare the result with these checks.

Incorrect attempts before answer: 0 / 3

Track progress

0 passed of 56 tasks

Pass every check or use one of your available skips to open the next task.

← Previous

Next task (pass every check first)

Flexbox in one line

Flexbox in one line

Why this works