×

css · level 2 · unit 1 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

shares the between the children.

Put a search box and a button in a wide flex row and there is empty room at the end. That leftover room is the free space.

flex-grow hands it out. It is a plain number, and the default is 0, so nobody grows. Give every child flex-grow: 1 and they share the free space equally.

Give one child flex-grow: 2 and it gets two shares for every one the others get. Give it to the search box alone and it takes the whole lot.

<div class="bar">
  <input class="search" placeholder="Search recipes">
  <button>Go</button>
</div>
.bar {
  display: flex;
  gap: 8px;
}
.search {
  flex-grow: 1;
}

Press show my page to see it here.

<input> is a box people type into. It grows to fill the row while the button keeps its size.