Flex CSS with item styling

by Andy Bulka

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item special">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1; /* Each item will take equal space */
  margin: 10px; /* Adds space around each item */
  border-width: 2px;
  border-style: solid;
}

.item.special {
  align-self: flex-start; /* Overrides align-items for this item */
  order: -1; /* Moves this item to the beginning */
}