css - 使用 CSS Grid/Flexbox 的专门布局
问题描述
我希望我能获得一些关于实现我一直在尝试重新创建的某个图片库布局的提示,这是布局:
链接到该网站https://www.styleshout.com/templates/preview/Sublime10/index.html
正如您所看到的,每一行上的一个图像都比另一行高一点,并且其他行完全适合彼此。
这是我所做的一个微不足道的代码笔尝试,但我完全不知道如何获得这种布局:
body {
margin: 0;
border-sizing: border-box;
display: flex;
justify-content: center;
width: 100%;
}
figure {
margin: 0;
display: inline;
}
.gallery-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 600px;
figure {
height: 350px;
picture img {
width: 350px;
height: 350px;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexible Image Gallery</title>
</head>
<body>
<div class="gallery-container">
<figure>
<picture>
<img src="https://source.unsplash.com/random/204x200" alt="" />
</picture>
</figure>
<figure>
<picture>
<img src="https://source.unsplash.com/random/209x200" alt="" />
</picture>
</figure>
<figure>
<picture>
<img src="https://source.unsplash.com/random/205x200" alt="" />
</picture>
</figure>
<figure>
<picture>
<img src="https://source.unsplash.com/random/202x200" alt="" />
</picture>
</figure>
<figure>
<picture>
<img src="https://source.unsplash.com/random/201x200" alt="" />
</picture>
</figure>
<figure>
<picture>
<img src="https://source.unsplash.com/random/206x200" alt="" />
</picture>
</figure>
</div>
</body>
</html>
谢谢你的帮助!
解决方案
这是我使用 flex 的解决方案:
- 使用类创建 2 个 div 以
.column
在一列中制作 3 个图像 - 添加类
.grow
使其flex: 1.2
比其他类高 1.2 倍 - 设置图像
flex: 1
以使其高度在容器中增长
看看我的演示:
body {
margin: 0;
border-sizing: border-box;
display: flex;
justify-content: center;
width: 100%;
}
figure {
margin: 0;
display: inline;
flex: 1;
display: flex;
flex-direction: column;
}
figure > img {
flex: 1;
object-fit: cover;
}
.column {
display: flex;
flex-flow: column wrap;
height: 800px;
width: 200px;
overflow: hidden;
}
.grow {
flex: 1.2;
}
.gallery-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 600px;
}
<body>
<div class="gallery-container">
<div class="column">
<figure>
<img src="https://source.unsplash.com/random/204x200" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random/209x200" alt="" />
</figure>
<figure class="grow">
<img src="https://source.unsplash.com/random/205x200" alt="" />
</figure>
</div>
<div class="column">
<figure class="grow">
<img src="https://source.unsplash.com/random/202x200" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random/201x200" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random/206x200" alt="" />
</figure>
</div>
</div>
</body>
</html>
推荐阅读
- typescript - 是否让变量:typeof import('large-module'); 将整个模块导入内存?
- node.js - 使用 Twilio 发送连续的短信,第二条消息在第一条消息之前到达
- python - 尝试将常量导入文件,ImportError:尝试相对导入而没有已知的父包
- javascript - 我希望我的智能合约与 USDT 一起使用
- python - 在 Windows 上使用 Anaconda 安装 Qiskit 失败
- javascript - 如何正确使用本地存储?
- javascript - 尝试在反应中初始化项目
- javascript - 数组中有多少对象类型?
- r - R中的时间格式和计算
- c# - Entity Framework Core 5.0 警告限制运算符 ('Skip'/'Take') 没有'OrderBy' 运算符