- AMP:Building Accelerated Mobile Pages
- Ruadhan O'Donoghue
- 234字
- 2021-07-08 10:04:07
Using flex and media queries for horizontal layout
To achieve the first goal, we can apply the following properties to the list container:
.related-items {
display:flex;
flex-wrap: wrap;
list-style: none;
}
This nearly gets us there. However, it's a little messy: there is no consistency in item width, and depending on the screen width, the list will end up being both horizontal and vertical (as shown in the following image), when we wanted it to be either horizontal or vertical:

We can fix this with a media query. Let's say we have four items. When displayed horizontally, we'll want each to take up 25 percent of the available space. We'll use a width of 50rem as our breakpoint:
@media (min-width:50rem) {
figure {
margin:40px;
}
.related-thumb {
flex-basis:25%;
flex-wrap:wrap;
}
.related-thumb amp-img, .related-thumb figcaption{
flex-basis:100%
}
.related-items li {
width:25%;
}
}

This will give us a 4x1 horizontal list of items on wider screens and a 1x4 vertical list on small screens.
We can push this even further. On mid-sized screens, let's go for a 2x2 grid. To achieve this, we'll add another media query that matches screens between our default and our large screen media queries (full code at /ch3/related-flex-media.html):
@media (min-width:35rem) and (max-width:50rem) {
...
.related-items li {
width:50%;
}
}
- Spring技術(shù)內(nèi)幕:深入解析Spring架構(gòu)與設(shè)計
- Web交互界面設(shè)計與制作(微課版)
- 編寫高質(zhì)量代碼:改善C程序代碼的125個建議
- 零基礎(chǔ)學(xué)MQL:基于EA的自動化交易編程
- STM32F0實戰(zhàn):基于HAL庫開發(fā)
- Kali Linux Wireless Penetration Testing Beginner's Guide(Third Edition)
- INSTANT Passbook App Development for iOS How-to
- 大模型RAG實戰(zhàn):RAG原理、應(yīng)用與系統(tǒng)構(gòu)建
- JAVA程序設(shè)計實驗教程
- Learning Raspbian
- C語言程序設(shè)計
- MySQL 8從零開始學(xué)(視頻教學(xué)版)
- Selenium WebDriver Practical Guide
- Docker on Windows
- SQL Server 2014數(shù)據(jù)庫設(shè)計與開發(fā)教程(微課版)