October 2017
Intermediate to advanced
370 pages
8h 57m
English
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" ...
Read now
Unlock full access