Horizontal flex items

Flex items can be horizontal. In the following CSS, we have given the parent a fixed size, exactly three times as wide as it is high:

.flex-container-row {
    display: flex;
    flex-direction: row;
    width: 450px;
    height: 150px;
}

The following markup shows increasing numbers of flex items within the flex parent:

<div class="flex-container-row">
  <!-- 1 flex item -->
  <amp-img src="img/placeholder.png" layout="flex-item"></amp-img>
</div>

<div class="flex-container-row">
  <!-- 2 flex items -->
  <amp-img src="img/placeholder.png" layout="flex-item"></amp-img>
  <amp-img src="img/placeholder.png" layout="flex-item"></amp-img>
</div>
...

<div class="flex-container-row">
  <!-- 7 flex items -->
  <amp-img src="img/placeholder.png" layout="flex-item"></amp-img>
  <amp-img src="img/placeholder.png" layout="flex-item"></amp-img>
  ...
  <amp-img src="img/placeholder.png" layout="flex-item"></amp-img>
</div>

The following image shows the results of having a number of flex items, ranging from one to seven, in the container. Note how the flex items are stretched depending on how many there are. The only time they aren't stretched is when there are three, because we are using square placeholder images, and the container's width is three times its height: