我有 4 張影像，我想 2 x 2 布局，但我不希望每張影像占據 50% 的螢屏，因為這會使它看起來很糟糕。我該怎么辦？
我嘗試了諸如將 flex-direction 設定為 column 之類的方法，但我意識到它只是將所有內容放在一條線上，沒有空間在其上放置其他影像。
uj5u.com熱心網友回復：
你可以為主容器設定一個最大寬度，像這樣。
html, body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
max-width: 60%;
margin: 0 auto;
}
.grid2x2 > div {
display: flex;
flex-basis: calc(50% - 40px);
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 20px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; } <div class="grid2x2">
<div class="box box1"><div>image one</div></div>
<div class="box box2"><div>image two</div></div>
<div class="box box3"><div>image three</div></div>
<div class="box box4"><div>image four</div></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521595.html
標籤：htmlcss弹性盒