Vertical flex items

Flex items can also be arranged vertically in columns. This time, we flip the width and height dimensions of the parent so that it is three times as high as it is wide:

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

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

<div class="flex-container-col">
  <!-- 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-col">
  <!-- 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>
  ...
</div>

Again, note how the flex items are distorted in the preceding examples. This is fine for containers, but it might not be what you're after when it comes to images.