Flexbox: alignment

In a flex row, justify-content distributes items along the row: flex-start (default), center, space-between (first at the left edge, last at the right, equal gaps), space-around. align-items positions them across the row: stretch (default, all the same height), center, flex-start, flex-end.

flex: 1 on an item makes it grow to fill the leftover space; give it to a search box between a logo and a menu and the box takes whatever is free. margin-left: auto on one item pushes it to the far end.

.bar { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.search { flex: 1; }

Your task

Make .bar a flex container 60px tall with its items spread by space-between and vertically centered with align-items. Give .grow flex: 1 so it fills the space between the logo and the menu.

Part of the final project. .bar is the toolbar under the header: logo, search, menu. It is saved in this browser and loaded into Project: a one-page site when you get there.

<!doctype html>
<html>
<head>
<style>
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.grow {
  flex: 1;
}
</style>
</head>
<body>
<header class="bar">
  <strong>Logo</strong>
  <input class="grow" placeholder="Search">
  <a href="#">Menu</a>
</header>
</body>
</html>