我最近一直在開發自己開發的主頁，並且在彈性盒中對齊我的專案時遇到一些困難。第一張 Flexbox 應包含三 (3) 張圖片，且所有圖片應位於彼此下方的一條垂直線上。
這對我的第二個彈性盒也很重要。
這是我的程式碼：
.flexcontainer-1 {
display: flex;
justify-content: flex-start;
align-items: left;
height: auto;
width: auto;
}
.flexcontainer-2 {
display: flex;
justify-content: flex-end;
align-items: right;
height: auto;
width: auto;
}
<div class="flexcontainer-1">
<!-- Übersicht über alle Immobilien mit entsprechenden Bildern -->
<h4>Unsere Immobilien</h4>
<!-- Weiterleitung über Anchor innerhalb des Images zu Einzelbeschreibung, -->
<!-- Übergabe der ID aus Datenbank in den Anchor -->
<p>
<a href="db_immobilien_desc_b.php?id=2">
<img src="../images/haus2.jpg" alt="Beschreibung Haus2"></a>
</p>
<p>
<a href="db_immobilien_desc_b.php?id=3">
<img src="../images/haus3.jpg" alt="Beschreibung Haus3"></a>
</p>
<p>
<a href="db_immobilien_desc_b.php?id=4">
<img src="../images/haus4.jpg" alt="Beschreibung Haus4"></a>
</p>
</div>
<div class="flexcontainer-2">
<p>
<a href="db_immobilien_desc_b.php?id=5">
<img src="../images/haus5.jpg" alt="Beschreibung Haus5"></a>
</p>
<p>
<a href="db_immobilien_desc_b.php?id=6">
<img src="../images/haus6.jpg" alt="Beschreibung Haus6"></a>
</p>
<p>
<a href="db_immobilien_desc_b.php?id=7">
<img src="../images/haus7.jpg" alt="Beschreibung Haus6"></a>
</p>
</div>
它總是在圖片的第二次對齊中產生間隙，不幸的是我還沒有找到解決這個問題的解決方案。
我非常感謝提示或建議，以及如何改進我的編碼。
提前非常感謝您。
親切的問候，
盧克
我嘗試過使用屬性 justifiy-content 和 align-items，但這對我來說不起作用。
有多種方法可以實現此佈局，CSS 網格、Flexbox 和多列佈局都可以（以不同的方式）。
不過，我建議的第一件事就是修改 HTML。從語義上講，您似乎正在顯示一個屬性列表，這立即表明應該使用一個列表（無論是有序列表還是無序列表）；我建議應該有描述性文字和圖像，這反過來又表明可以使用
<figure>元素。透過此修訂，一旦包裝在
<main>標記（或<section>、<article>...）中，上述HTML 可能會變成如下圖：將其與多列佈局一起使用，並在 CSS 中添加解釋性註解：
JS Fiddle 示範。
也可以用CSS來實現這一點，雖然搭載網格的數字網格左到然後右從上到下流動：
JS Fiddle 示範。
並且，使用彈性佈局：
JS Fiddle 示範。
參考文獻：
盒子尺寸。內部破解。列數。。彎曲方向。flex-grow。flex-flow。flex-wrap。網格範本列.內聯大小。清單樣式類型.邊緣區塊。內邊距。文字對齊。。您似乎在第一個容器中使用
h4。從
flexcontainer-1中取得此元素。為了達到預期的結果，你應該這樣做
.container { display: flex; gap:10px; } .item { height: 50px; width: 100px; background-color: blue } .box { display: flex; flex-direction: column; gap: 10px }