Learn CSS Flexbox by Building a Photo Gallery - Step 15

HTML-CSS
1

Tell us what’s happening:

Not a problem, but a question regarding property flex direction.
When i set the value to row,column,column-reverse. i can see all the cat images. But when i set to row-reverse. It doesnt show all of them, even on fullscreen mode.

Your code so far

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}




/* User Editable Region */

.gallery {
  display: flex;
  flex-direction: row-reverse;
}

/* User Editable Region */


.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 15

2

I’m going to guess here that your browser is set up for left-to-right languages like english which means that your horizontal scrollbar only appears if the content is wider than the screen “to the right”. But if the content is wider than the screen “to the left” then the scrollbar cannot reverse its directions to allow you to scroll to the left past the left edge of the screen. I’m also going to guess that if the browser was setup for right-to-left languages like arabic or hebrew, then you would experience the row-reversal differently.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.