上QQ阅读APP看书，第一时间看更新

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.