CSS: Flexbox layout

A short, tested CSS example for flexbox layout. Copy it and adjust the names and paths for your project.

CSS

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.grow { flex: 1; }

Find it in Zest

Search for “css flexbox layout” in Zest and this example appears above the results, with other matches to choose from. Searches stay private.