We've already seen practical examples of AMP's fixed
and responsive
layouts. Another useful layout is flex-item
. Flex items take up all available space in a display: flex
parent. There are many layout possibilities, so we'll just give a quick overview of some of them, and later in the chapter we'll see how to apply the flex-item
layout to text and images in our article page example.
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...