classes so that the images scroll horizontally.
To help you test your scrolling, duplicate all five <li> elements in
index.html. This will give you lots of content to scroll through. To do this, simply select all of the lines between <ul
class="thumbnail-list"> and </ul>, copy them, and paste the
result just above the </ul>. You should end up with 10 list items,
containing images otter1.jpg through otter5.jpg twice. Be sure to save index.html when you are done. Duplicating content while you are developing is a good technique for simulating a more robust project. It allows you to see how your code handles real-world situations.
For a horizontally scrolling list of thumbnails, each thumbnail must be constrained to a specific width and the thumbnails should be laid out horizontally on a single line.
The display: block property, which you have used several times,
will not create the desired effect. It causes the browser to render a line break before and after the element. However, a related style,
display: inline-block, is perfect for this situation. With inline-block, the element’s box is drawn as if you declared display: block, but without the line breaks – allowing your
thumbnails to stay lined up in a row.
Add a width declaration and change the display declaration for the .thumbnail-item class in styles.css.
... .thumbnail-item { display: block; display: inline-block; width: 120px; border: 1px solid rgb(100%, 100%, 100%, 0.8); border: 1px solid rgba(100%, 100%, 100%, 0.8);
} ...
(Note that Atom’s linter may warn you that “Using width with border can sometimes make elements larger than you expect.” This is
because the width property only applies to the content portion – not
the padding or border – of the element’s box. You do not need to do anything about this warning.)
With the .thumbnail-item element’s width set to an absolute value
of 120px, the .thumbnail-image is effectively fixed as well, since
the .thumbnail-image adjusts to its container’s width.
Why not just set the .thumbnail-image to width: 120px? You
want the .thumbnail-image and the .thumbnail-title to be the
same width. Instead of setting the width property for each of these,
you set it on their common parent element. That way, if you need to change the width, you only need to change it in one place. Generally,
it is a good practice to have inner elements adapt to their containers. Save styles.css and check your page in Chrome. You can see that the .thumbnail-item elements line up side by side – but when
Figure 4.4 inline-block creates rows that wrap
To get the scrolling behavior you want, set .thumbnail-list to
prevent wrapping and allow scrolling in styles.css. ... .thumbnail-list { list-style: none; padding: 0; white-space: nowrap; overflow-x: auto; } ...
The white-space: nowrap declaration prevents the .thumbnail- item elements from wrapping. The overflow-x: auto tells the
browser that it should add a scrollbar along the horizontal space (the x axis) of the .thumbnail-list element to accommodate content
that overflows – i.e., does not fit within the .thumbnail-list.
Without this declaration, you would have to scroll the entire web page to see the additional thumbnails.
Save your file again and take a look at the results in your browser. The thumbnails are now in a single row, and you should be able to scroll through them horizontally (Figure 4.5).
Figure 4.5 Horizontally scrolling thumbnails
This is a good start to the enhanced Ottergram interface. It works just fine for some screen sizes. However, it is not perfect, because it does not adapt well to a wide range of sizes – especially those that are much larger or smaller than the computer you are currently using. In the next two sections, you will add code that gives Ottergram a more fluid layout and allows its UI - its user interface - to shift between different layouts to adapt to ranges of screen sizes.
Flexbox
You have seen display styles specifying the properties block and inline. Inline elements, like the thumbnail items in your newly
scrolling list, are laid out next to one another, while block elements occupy their own horizontal line.
Another way to think of this is that block elements flow from top to bottom and inline elements flow from left to right (Figure 4.6).
Figure 4.6 Block vs inline elements
The display property tells the browser how an element should flow
in the layout. For blogs or online encyclopedias, the inline and block values work well. But for application-style layouts like web-
based email and social media sites, there is a new CSS specification that allows elements to flow more dynamically. This is the flexible
box model, or flexbox.
Flexbox CSS properties can ensure that thumbnail and detail areas fill the screen and maintain their proportions relative to one another. This is exactly what you need for Ottergram. You can also use
flexbox properties to center the contents of the detail area both
horizontally and vertically, a task which is notoriously difficult using standard box model properties.