Horizontally justify rows of text? - html

Question

I would like to have the links in each row div to be justified, and to be centered on the page, so it looks cleaner (assume below is centered on the page):
Chrysanthemum.jpg Desert.jpg Hydrangeas.jpg
Jellyfish.jpg Koala.jpg Lighthouse.jpg
Penguins.jpg test (1).jpg test (2).jpg
test (3).jpg test (4).jpg Tulips.jpg
It doesn't have to look exactly like that, as the image names are of variable length, I'd just like to make it look better than it does now:
html:
<div id='image-list'>
<div class="row">
<a class="image-link" href="/static/images/Chrysanthemum.jpg"> Chrysanthemum.jpg </a>
<a class="image-link" href="/static/images/Desert.jpg"> Desert.jpg </a>
<a class="image-link" href="/static/images/Hydrangeas.jpg"> Hydrangeas.jpg </a>
</div>
<div class="row">
<a class="image-link" href="/static/images/Jellyfish.jpg"> Jellyfish.jpg </a>
<a class="image-link" href="/static/images/Koala.jpg"> Koala.jpg </a>
<a class="image-link" href="/static/images/Lighthouse.jpg"> Lighthouse.jpg </a>
</div>
<div class="row">
<a class="image-link" href="/static/images/Penguins.jpg"> Penguins.jpg </a>
<a class="image-link" href="/static/images/test%20%281%29.jpg"> test (1).jpg </a>
<a class="image-link" href="/static/images/test%20%282%29.jpg"> test (2).jpg </a>
</div>
<div class="row">
<a class="image-link" href="/static/images/test%20%283%29.jpg"> test (3).jpg </a>
<a class="image-link" href="/static/images/test%20%284%29.jpg"> test (4).jpg </a>
<a class="image-link" href="/static/images/Tulips.jpg"> Tulips.jpg </a>
</div>
</div>
css:
#image-list{
display: flex;
justify-content: space-around;
}
current output, kind of works but puts all my rows on the same "line":
I've also tried this css:
#image-list.row{
display: flex;
justify-content: space-around;
}
But that just pushes everything to the left, with no seeming justification:
screenshot here
What am I overlooking or doing wrong? Do I have to maybe set a div to be a specific width, then justify to that width somehow?

Answer 1

It looks like you are displaying tabular data, so why not use a <table>?
If you want some sort of responsive layout, then you can use display: table and display: table-cell for desktop, then revert to display: block at smaller breakpoints with media queries.
Otherwise, defining a set width for each link will line them up nicely e.g. .image-link { width: 33.33%; }
Also, to enable flex items to wrap rather than display on one line, you need to use #image-list.row { flex-wrap: wrap; }