We created a flex container,
this unordered list here,
and this list contains three list items 1, 2, 3,
where each list item contains an image and a paragraph
here, there, and also in the third one.
And actually our logic would be
that if we define a width for the container,
we could assume that each single list item
occupies one third of that space
available in that container.
At least this would be the idea
we would like to follow here.
For some reason this is not working
because we have some space left here
to the right of this last image.
So apparently something went wrong.
Well nothing went wrong.
This is again just pure CSS logic
and before we fix this lets quickly
investigate what is going on right here.
Let's go to the first list item
we see here to the left in the browser.
Please always check this.
If I hover here,
we have a width of 300 pixels for the list item,
300 pixels for the image and 300 for the paragraph.
The second list item has a width of 299 pixels
for the list item,
299 for the image,
299 for the paragraph.
The third one has a width of 267 for the list item,
267 for the image and 267 for the paragraph.
Now, for some reason,
especially the last list item is a lot smaller
from a width perspective when comparing
it to the other ones.
What's the reason for this?
Well, think about what is defining
the width of the list item.
The list item contains the image and the paragraph,
and therefore the width of the content
is defining the width off this list item,
meaning that either the paragraph or the image are the
elements which caused this reduced width here.
Now the paragraph cannot be the issue.
The paragraph takes the entire space available,
but as you see Barcelona, Spain, this text is not very long.
So the content of this element doesn't occupy
the entire space available.
Therefore, what must drive our width
of the list element in the end
is the width of our image.
Because here we defined a fixed height for all images.
Each image has a height of 200 pixels.
Now, if we inspect our source images though,
by right clicking onto these onto get info,
we have a resolution of 1920 times 1284 for Miami,
1920 and 1283 for Munich
and 1920 and 1440 for Barcelona.
So this means Munich and Barcelona
are higher than the Miami image
and if we add a fixed height to these images here
this simply means that these images must shrink
more than the Miami image, right?
Because we have to reduce more height
with more height being reduced by default.
While the image also will be reduced from a width
perspective.
That's the reason why our Munich image is only 299
and our Barcelona image is only 267 pixels wide
it's not the problem why our list elements and therefore
our flex items do not equally occupy
one third of the space in the container
it's the way our images are displayed.
We can easily fix this problem though,
by defining the width for our images,
we could define the width with a fixed value.
For example,
if we go to our image selector and add a width
of maybe 250 pixels,
then, well, this will solve the issue of the different
sizes for our list items.
Each list item now has a width of 250 pixels,
but as our flex container is built dynamically,
meaning with a percentage value,
the unused space will increase if we increase the width
and decrease if we decrease the width.
Therefore a percentage value would again be the way to go.
And again, a value of 100% is the solution here,
because this tells our Flexbox.
If you're working in a Flexbox context here,
that it should use the enter a space available for each flex
item well as each flex item has a width of one third
of the enter container width available by default.
Well, this would fix this issue quickly.
If we do that and change the pixel
value to percentage value,
you see that this problem is solved.
Now each list item occupies the same space
and it also then dynamically increases and decreases,
if we increase or decrease the width of our page.
Now we are not talking about responsive design
at this stage of the course,
but typically,
while this behavior we have right here is maybe nice
from a width perspective for the list items,
but I don't think the images look pretty good here.
Therefore,
we have to dive a bit deeper into images
to make this look better.