Issues and challenges with aligning images in Flexbox
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.
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:
Unsere Immobilien
PlaceKitten image: 1
PlaceKitten image: 2
PlaceKitten image: 3
PlaceKitten image: 4
PlaceKitten image: 5
PlaceKitten image: 6
Use it with a multi-column layout and add explanatory comments in the CSS:
/* CSS custom properties used to provide common theming
to multiple elements: */
:root {
--commonSpacing: 1em;
}
/* a simple CSS reset to remove default margins,
and padding; ensuring all browsers use the
same sizing algorithm for content, and also
applying the same font-size and font-family: */
*,
::before,
::after {
box-sizing: border-box;
font-family: system-ui;
font-size: 16px;
margin: 0;
padding: 0;
}
/* to emphasise the heading: */
h4 {
font-size: 1.8em;
margin-block: calc(0.5 * var(--commonSpacing));
text-align: center;
}
main {
/* setting the size of the inline axis (width, in English and
Latin languages) to 80 viewport width units, with a minimum
size of 30 root-em units, and a maximum size of 1300 pixels: */
inline-size: clamp(30rem, 80vw, 1300px);
/* centering the element on the inline axis: */
margin-inline: auto;
}
ul {
/* using multi-column layout,
ensuring two columns: */
column-count: 2;
/* removing default list-markers: */
list-style-type: none;
/* centering the elements
within the
: */
text-align: center;
}
li {
/* ensuring that the
doesn't have
its contents spread over columns,
leaving unsightly orphans at the
end, or beginning, of a column: */
break-inside: avoid;
/* spacing the elements out: */
margin-block-end: var(--commonSpacing);
}
/* CSS custom properties used to provide common theming
to multiple elements: */
:root {
--commonSpacing: 1em;
}
/* a simple CSS reset to remove default margins,
and padding; ensuring all browsers use the
same sizing algorithm for content, and also
applying the same font-size and font-family: */
*,
::before,
::after {
box-sizing: border-box;
font-family: system-ui;
font-size: 16px;
margin: 0;
padding: 0;
}
main {
/* setting the size of the inline axis (width, in English and
Latin languages) to 80 viewport width units, with a minimum
size of 30 root-em units, and a maximum size of 1300 pixels: */
inline-size: clamp(30rem, 80vw, 1300px);
/* centering the element on the inline axis: */
margin-inline: auto;
}
/* to emphasise the heading: */
h4 {
font-size: 1.8em;
margin-block: calc(0.5 * var(--commonSpacing));
text-align: center;
}
ul {
/* using grid layout: */
display: grid;
/* spacing adjacent elements: */
gap: var(--commonSpacing);
/* defining two columns, each taking one fraction of
the available space:*/
grid-template-columns: repeat(2, 1fr);
list-style-type: none;
text-align: center;
}
/* CSS custom properties used to provide common theming
to multiple elements: */
:root {
--commonSpacing: 1em;
}
/* a simple CSS reset to remove default margins,
and padding; ensuring all browsers use the
same sizing algorithm for content, and also
applying the same font-size and font-family: */
*,
::before,
::after {
box-sizing: border-box;
font-family: system-ui;
font-size: 16px;
margin: 0;
padding: 0;
}
main {
/* setting the size of the inline axis (width, in English and
Latin languages) to 80 viewport width units, with a minimum
size of 30 root-em units, and a maximum size of 1300 pixels: */
inline-size: clamp(30rem, 80vw, 1300px);
/* centering the element on the inline axis: */
margin-inline: auto;
}
/* to emphasise the heading: */
h4 {
font-size: 1.8em;
margin-block: calc(0.5 * var(--commonSpacing));
text-align: center;
}
ul {
/* using flexbox layout: */
display: flex;
/* shorthand for:
flex-direction: row;
flex-wrap: wrap; */
flex-flow: row wrap;
/* setting a gap between adjacent elements: */
gap: var(--commonSpacing);
/* removing default list-markers: */
list-style-type: none;
}
li {
/* allowomg the
to expand to take up
more room: */
flex-grow: 1;
/* setting the size of the element to be
45% of that of the parent; flex-basis
always refers to the inline-axis of flex-items,
which can be modified by updating the
flex-direction of the parent: */
flex-basis: 45%;
/* centering the content within the
