gpt4 book ai didi

css - Flexbox,方形 div 的响应式网格保持纵横比

转载 作者:技术小花猫 更新时间:2023-10-29 11:14:57 27 4
gpt4 key购买 nike

我正在尝试使用 div 创建一个 2x2 网格。一些 div 可能包含图像,但它可能会被设置为背景,选项为 background-size: cover

这是我创建的笔:http://codepen.io/qarlo/pen/vLEprq

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
max-width: 960px;
width: 80%;
}
.container__item {
align-content: center;
border: 1px solid #333;
display: flex;
flex-basis: 1;
font-size: 3em;
justify-content: center;
height: 100%;
margin-bottom: 1em;
min-height: 300px;
width: 47%;
}
<div class="container">
<div class="container__item">?</div>
<div class="container__item">?</div>
<div class="container__item">?</div>
<div class="container__item">?</div>
</div>

我想强制 div 为正方形并在调整大小时保持纵横比。我错误地希望这对 flexbox 来说会很简单,但除非我遗漏了什么,否则我错了。

最佳答案

要保持您的元素纵横比,一个非常简单的方法是使用 CSS Viewport units

我修改了你的笔,看看这个单位是如何工作的:http://codepen.io/vladbicu/pen/wMBmOb

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
max-width: 960px;
width: 80%;
}

.container__item {
align-content: center;
border: 1px solid #333;
display: flex;
flex-basis: 1;
font-size: 3em;
justify-content: center;
margin-bottom: 1em;

// maintain aspect ratio
width: 30vw;
height: 30vw;
}

希望对您有所帮助。

关于css - Flexbox,方形 div 的响应式网格保持纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34152213/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com