- AMP:Building Accelerated Mobile Pages
- Ruadhan O'Donoghue
- 91字
- 2021-07-08 10:04:08
Vertical flex items
Flex items can also be arranged vertically in columns. This time, we flip the width and height dimensions of the parent so that it is three times as high as it is wide:
.flex-container-col {
display: flex;
flex-direction: col;
width: 150px;
height: 450px;
}
...
<div class="flex-container-col">
<!-- 1 flex item -->
<amp-img src="img/placeholder.png" layout="flex-item"></amp-img>
</div>
<div class="flex-container-col">
<!-- 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-col">
<!-- 7 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>

Vertical flex items being distorted depending on how many there are
Again, note how the flex items are distorted in the preceding examples. This is fine for containers, but it might not be what you're after when it comes to images.
推薦閱讀
- 軟件項目管理(第2版)
- Spring Cloud Alibaba微服務架構設計與開發實戰
- Redis Applied Design Patterns
- Manga Studio Ex 5 Cookbook
- Mastering Entity Framework
- 青少年美育趣味課堂:XMind思維導圖制作
- Learning Elixir
- Selenium Design Patterns and Best Practices
- Blender 3D Incredible Machines
- JavaScript從入門到精通(第3版)
- Nginx Essentials
- JavaScript動態網頁開發詳解
- Learning Network Forensics
- C++編程兵書
- Instant Debian:Build a Web Server