CSS Flex Question (Unit 2 Lesson 12)

CS Discoveries Coding and Debugging Help
1

Hi,

I understand the styles added to the images class here. What I am not sure I can explain is why the page has 5 images / row. I can make the web screen narrow or wide and the 5 images remain in each row. Where is that determined in the code?

Link to the project or level: [https://codeprojects.org/projects/weblab/O_6RZhIaEkkidET3Dcyfkg]

2

My students asked the same question!
We decided it was based upon the size of the pictures, the px that defined width.
This was a series of levels that students asked for but there is a lot of information missing to explain how best to use flexbox.
There are also a few missing examples for teachers to use to help problem solve.
Hopefully this unit gets further developed as more use it.

3

@jwilson, @mriley,

Yes, the initial size of the image definitely comes into play here, however, the issue of 5 images per row is not related to the image width. That is being affected by the “flex-direction” property of “column-reverse”, which I will say is NOT a very common property… in fact, although I’m sure there is a case use for it, I don’t know what that would be … Since the flex-direction is column instead of row, the wrap is wrapping from one column to the next (and not one row to the next). Since there is content below the images, even making the screen less tall won’t achieve the wrapping effect due to the other content below … I couldn’t find a way to get wrapping to work on this page.

If you change the flex-direction to row (or row-reverse … also fairly uncommon), you will see that the wrapping does work when you change the screen size.

Although it can be fun to play around with the different properties, many of them are not very commonly used in real web development scenarios, so when I teach, I usually stick to the most common ones… in this case, flex-direction: column and flex-direction:row are both used as is wrap, but wrapping on a column is not very commonly used …

Hope this makes sense.

Mike

1 Like
4

So … I had to see if Chat GPT could find a case scenario for using “column-reverse” and “flex-wrap: wrap” and sure enough, it found one … even it is a somewhat unlikely one … lol…

Using flex-direction: column-reverse and flex-wrap: wrap together is somewhat unusual but can be helpful in cases where you need elements to stack in a column layout that flows in reverse order (from bottom to top) and also wraps onto a new “row” when there’s limited vertical space.

Here’s a specific scenario where these properties could be useful:

Chat Interface with New Messages at the Bottom

Imagine you’re designing a chat interface where new messages appear at the bottom of the chat window, and older messages are above. You might want the latest messages to start from the bottom and wrap onto the next “column” (technically, a row when using wrap in this way) if the chat history grows beyond the height of the container.

Code on!

Mike