書名： AMP：Building Accelerated Mobile Pages
作者名： Ruadhan O'Donoghue
本章字數： 134字
更新時間： 2021-07-08 10:04:09

Mixing flex and non-flex items

We can also have flex and non-flex items together in the same flex parent. Non-flex items must declare their width and height attributes explicitly, and the remaining space will be divided between the flex items:

<div class="flex-container-row">
  <amp-img src="img/placeholder.png" width="250" height="150" layout="fixed"></amp-img>
  <amp-img src="img/placeholder.png" height="100" 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"&gt;</amp-img>
</div>

Mixed flex and non flex items filling a flex container

Note that we are demonstrating these layouts with uniform, square images so that their distortion will show how different layouts will affect components. It is unlikely that you will ever want actual images to distort like this, but it will be useful to know what to expect when applying these layouts to other components, such as amp-fit-text and amp-carousel, that we'll see later.

That's probably enough about flex layouts for now. We'll see how to use this last flex layout later in the chapter.

官术网_书友最值得收藏!

AMP：Building Accelerated Mobile Pages

Mixing flex and non-flex items