Issue
I’ve been recently working on my own developed home-page, and have some difficulties aligning my items in a flexbox. First flexbox should have three (3) pictures, and all of them should be positioned in one vertical line under each other.
This also counts for my second flexbox.
Here’s 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 pictures and unfortunately I have not found a solution to fix this.
I really appreciate tips or advice, how I can improve my coding.
Thank you very much in advance.
Kind Regards,
Lukas
I’ve tried playing around with property justifiy-content and align-items, but that did not work out for me.
Solution
It seems you’re using h4 in your first container.
Get this element out of the flexcontainer-1.
For your expected result you should do something like this
.container {
display: flex;
gap:10px;
}
.item {
height: 50px;
width: 100px;
background-color: blue
}
.box {
display: flex;
flex-direction: column;
gap: 10px
}<div class="container">
<div class="box">
<div class="item">House 1</div>
<div class="item">House 2</div>
<div class="item">House 3</div>
</div>
<div class="box">
<div class="item">House 4</div>
<div class="item">House 5</div>
<div class="item">House 6</div>
</div>
</div>PS: one other tip: do not use p element for wrap img see this StackOverflow post
PPS: If you want to learn flex, and logic you can try this website for learn flex with a little game : https://flexboxfroggy.com
Answered By – superdunck
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0