About a week ago on January 13, 2019, I saw a tweet from Heydon Pickering ( @heydonworks ) talking about how he was using Flexbox to switch directly between multiple and single column layouts but didn’t have time to read it at the time because I was at work.
?? The Flexbox Holy Albatross
I found a way to make Flexbox switch directly between multiple and single column layouts. No media queries; no JS ???https://t.co/085xVal8Rp
— @firstname.lastname@example.org (@heydonworks) January 13, 2019
Later that day I saw Jonathan Snook ( @snookca ) had tweeted about some tweaks he had made to Heydon’s CodePen example.
After reading @heydonworks‘s post on switching from a multiple column flexbox layout to a single column layout without an intermediate step, I spent some time trying to understand why it worked. I wrote up my notes: https://t.co/SBQb4D1ppU
— Snook (@snookca) January 14, 2019
Started to Play with Heydon’s Code
After reading through both articles, I started playing around with Heydon’s CodePen to see what would happen with only two blocks for my jfciii Ate Here restaurant list. After playing around for a bit, I grabbed the HTML and CSS I had messed with and copied it into Textmate to make one page using my template for jfciii Ate Here. At that point, I gathered a few restaurants from my list of place to eat in Washington, DC and replaced the blocks with real content to see what doing so would be like on the page.
Part of my picking certain restaurants was to gather ones with different lengths to content for the same row for a wide width screen (think desktop/laptop). At first, I started with two per restaurants to see what that looked like for desktop/laptop and different width between there and a narrow width for a phone.
To me, it seemed that having two items to a line/row seemed like it could be confusing when reading the content, But then I remembered that most of the time people would most likely checking for restaurants on their phones while they were out wandering a city or sitting with friends instead of a desktop or laptop.
Pushed My Code Example
After pushing the updates a few different times to my website, I asked a coworker what they thought about the two columns, and they thought maybe adding a bit of space between the two columns would make it easier to read.
I then spent some time working on my CSS to add a few REMs worth to the right of them which seemed to work. But then I had the problem of forgetting I had to only added it to the first item in the list for a widescreen device. I ended up using :nth-child(odd), so the extra padding was on the first item in the row. Next, I had to remove the extra padding when in a narrower view such as on my phone.
Then I decided to attempt to use three restaurants to a row for a few rows and then two for one, and one with only one restaurant to see how they all looked before updating my PHP code to generate a given amount to my application page.
When I did that, I then had to add a max-width to the restaurant content container, so it didn’t span the width of a row, so the reading experience was better for people because of the long line length.
So here is my experiment with a bit of flexbox for jfciii Ate Here and the current look of one restaurant at a time for the wider width.
Thanks, again Heydon and Jonathan for your articles and examples to get me to play around with flexbox.
Further Reading and Video Watching
Now it’s off to spend time finishing up reading Rachel Andrew’s ( @rachelandrew ) book from A Book Apart “The New CSS Layout“. Then start reading Rachel and Jen Simmons ( @jensimmons ) other work and watching both of their amazing videos to understand CSS Grid better. See below for more of their work.
- Jen Simmons CSS Grid Vvdeos at Layout Land on YouTube
- CSS Grid Experimental Labs examples
- Jen’s Writing
Please leave a comment of which number of restaurants per row for wider screens you think works for ease of reading and compare against my current version of jfciii Ate Here.
Did you test the reading order of the Flexbox pages with a screen reader? If not, I’m sure you can find a screen reader user who would run through them for you for a little crispy rice salad.
Sorry, it’s taken so long to get back to you. I’ve been busy and wasn’t expecting anyone to read this.
No, I did not do any screen reader testing because I wasn’t expecting issues by adding an extra DIV around the groups of preexisting content and adding some flexbox CSS to that DIV item. I will see if I get the same issue using JAWS with Firefox once I get my JAWS updated on my machine because currently, it won’t read Firefox pages.
After looking at what you said I did notice that when using IE 11 and Edge on Windows 10 along with IE 11 on Windows 7 that when there is a third restaurant to a row, it moves down below the other two. Not sure if it’s an issue when calculating the width or it has to do with the flexbox being used.