This is because flexbox expands the columns in that row so combined they fill 100% of the width. One interesting side effect of this is that when the number of items isn’t evenly divisible by the number of columns, the width of the items in the last row doesn’t match the widths of all the previous rows: Now we have columns that grow/shrink in number depending on what fits, without resorting to any media queries. We add a left/top margin to all of our items, then adjust for that extra space in our container, like so: Instead, we use a simple workaround to achieve our desired result. We really need :last-column-in-this-row but I don’t think that selector exists. Using :last-child won’t work, since the last item in a column could be items 4 and 8 of 9 total. Adding a margin-right to our items would add that space, but also causes the last item in every row to have a right margin that just isn’t needed. Spacing OutĪll of our content is smushed together, leaving out some precious whitespace. The content still shows fine, just not as concise.įor more details on flexbox browser support, check out the flexbox page.Īlso, because Safari and IE10 require browser prefixes, I recommend using a tool like Autoprefixer to help out. In many instances (where usage is <1%), the fallback of a single column of items is an acceptable compromise (I’ve gone this route for a recent project). Flexbox in general just doesn’t work there. I should probably get this out of the way: this won’t work if you have to fully support IE9 or below. If not, go check out CSS Trick’s Complete Guide to Flexbox for a great intro. I’m going to assume right now that you’re already familiar with flexbox and how this works. The task was fairly simple: with a list of N items, display them in X columns that grow and shrink with the container width (where N is a number dependent on number of results and X is a number dependent on screen width). On a recent project, I’ve had some fun using flexbox to create a responsive, multi-column list that’s easy to set up and flexible with various size content. Yet there are features under the hood of flexbox that do more than just make it easier to do what we’ve already done. Even-height columns, layout re-ordering, sticky footers on short pages all things that Flexbox makes dead simple (except for, as usual, a few browser bugs here and there). Yet it brings many other capabilities to the table, such that I think it’s one of the biggest advancements we’ve had on the front-end for quite some time. If all Flexbox brought us was sane vertical centering, I’d be more than overjoyed with it. Thankfully, Flexbox has saved the day in that regard. In spite of those issues, the flexibility inherent to this method and how it allows for layout switching, which you can see covered in Layout Manipulation, is the best reason to use it.Those two simple words used to bring fear and trepidation to anyone having deal with the shortcomings of vertical-align: middle. Making the columns a little narrower than total width of the space they live in is sometimes a suitable work-around, but it’s not 100% fool-proof. It’s all dependent on how an email client renders tables or calculates widths. You’re likely to run into this problem if the column elements “touch” each other, like placing two 300px-wide columns next to each other in a 600px space. Because the columns are essentially floated, they tend to wrap under one another if there’s any layout wonkiness. So, what’s bad about this method? Instability. Setting the width of each column to 100% allows them to fill the available screen space, just as in the first example.
The default styling for the columns isn’t really a concern here, so let’s skip straight to the media query styles:
0 kommentar(er)
