I've been working on a homepage I've developed recently, and I'm having some difficulty aligning my items in a flexbox. The first flexbox should contain three (3) images, and all images should be on a vertical line below each other.
This is also important for my second flexbox.
This is my code:
.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>
It always creates a gap in the second alignment of the image, unfortunately I haven't found a solution to this problem yet.
I would really appreciate tips or suggestions and how to improve my coding.
Thank you very much in advance.
kind regards,
Luke
I've tried using the attributes justifiy-content and align-items but that doesn't work for me.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
There are multiple ways to implement this layout, CSS grid, Flexbox and multi-column layout all work (in different ways).
The first thing I recommend, though, is to modify the HTML. Semantically, you appear to be showing a list of properties, which immediately suggests that a list should be used (either ordered or unordered); I would suggest that there should be descriptive text and images, which in turn suggests that
<figure>element.With this revision, once wrapped in a
<main>tag (or<section>,<article>...), The above HTML may look like this:Use it with a multi-column layout and add explanatory comments in the CSS:
JS Fiddle 演示。
也可以使用 CSS 网格来做到这一点，尽管带有网格的数字将从左到右然后从上到下流动：
JS Fiddle 演示。
并且，使用弹性布局：
JS Fiddle 演示。
参考文献：
box-sizing。break-inside。clamp()。column-count。display。flex-basis。flex-direction。flex-grow。flex-flow。flex-wrap。gap。grid-template-columns.inline-size。list-style-type.margin-block。margin-inline。repeat()。text-align。var()。You appear to be using
h4in the first container.Get this element from
flexcontainer-1.To achieve the desired results, you should do this
.container { display: flex; gap:10px; } .item { height: 50px; width: 100px; background-color: blue } .box { display: flex; flex-direction: column; gap: 10px }