When considering using Flexbox or CSS Grid to change the visual order of elements, remember that “with great power comes great responsibility”.
Here’s a lovely intrinsically responsive (no media queries) photo gallery solution from Stephanie Eckles. It can accommodate differently sized images and achieves its layout by a combination of flexbox features (
flex-basis) and by applying
object-fit: cover to photos to make them fully cover their parent list items.
Modern CSS Solutions for Old CSS Problems
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. Here’s a history of CSS and web design, as I remember it.
Create a more flexible component which allows the text to wrap based on the content rather than the viewport size.
Léonie Watson explains how the HTML tabindex attribute is used to manage keyboard focus. Of particular interest to me was a clarification of what
tabindex="-1" does (because I always forget).
When tabindex is set to a negative integer like -1, (the element) becomes programmatically focusable but it isn’t included in the tab order. In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.
See all tags.