Using flex-item layout

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.

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...