英文:
Make flex item grow to available space, but keep aspect ratio
问题
以下是代码部分的翻译：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
width: 800px;
height: 500px;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 10px;
background-color: lightgray;
}
.card {
width: 50px;
height: 50px;
border-radius: 2px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
cursor: pointer;
background-color: hotpink;
}
<!-- language: lang-html -->
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<!-- end snippet -->
请注意，这是您提供的代码部分的翻译，没有其他额外的内容。
英文:
Is it possible to make flex items grow to the available space, but keep the aspect ratio? Here, I am having perfect squares, and I want to keep them as perfekt squares, but also make them grow to the vailable space that there is.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
width: 800px;
height: 500px;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 10px;
background-color: lightgray;
}
.card {
width: 50px;
height: 50px;
border-radius: 2px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
cursor: pointer;
background-color: hotpink;
}
<!-- language: lang-html -->
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<!-- end snippet -->
答案1
得分: 0
使用CSS的aspect-ratio属性可以实现：
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
width: 800px;
height: 500px;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 10px;
background-color: lightgray;
}
.card {
aspect-ratio: 1/1;
border-radius: 2px;
flex: 1;
cursor: pointer;
background-color: hotpink;
}
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
这段代码使用了aspect-ratio属性来控制卡片的宽高比。
英文:
Yes, by using the CSS aspect-ratio property:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
width: 800px;
height: 500px;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 10px;
background-color: lightgray;
}
.card {
aspect-ratio: 1/1;
border-radius: 2px;
flex: 1;
cursor: pointer;
background-color: hotpink;
}
<!-- language: lang-html -->
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论