Search Results

  1. A Complete Guide to Flexbox

    Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the differnet possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
  2. “Old” Flexbox and “New” Flexbox

    Just so everyone is clear on this: "Flexbox" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented. …

  3. Does Flexbox Have a Performance Problem?

    Wilson Page wrote a really great article for Smashing Magazine digging into a real world website and all the cool modern tools and techniques he and his team used to build it.

    For layout, they initially chose flexbox, but...…

  4. Don’t Overthink It (Flexbox) Grids

    Four years ago I posted "Don't Overthink it Grids" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week.

    That article was my way of saying: "Fear not! You can make a grid yourself! You don't need a complicated framework." It might not have been quite as fancy, but that's how I rolled. You float a couple of elements …

  5. Flexbox Bar Navigation Demo

    Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

    But I've been enjoying tinkering with flexbox, so I decided to toss it together with that, and it made for a pretty educational example I think.…

  6. Designing A Product Page Layout with Flexbox

    Every day at Shopify I speak with Partners who are constantly pushing the boundaries of what's possible in ecommerce design. Recently, I've noticed a number of designers are experimenting with Flexbox in their stores. As web designers and developers, one of our primary goals is to bring focus to content and make it easy for our visitors to navigate that content. To accomplish this goal, we need a functioning layout where technology gets out of the way and the content …

  7. Flexbox and Truncated Text

    Situation: you have a single line of text in a flex child element. You don't want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!

    Fortunately, there is a (standardized) solution. You just need to use a non-flexbox property/value to do it.…

  8. Filling the Space in the Last Row with Flexbox

    Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those children is some percentage of the width of parent such that they make equal rows, like 25% wide each for four columns, 33.33% wide each for three columns, etc. The goal is to fill the space of this "grid" evenly. There are an unknown number of children, so let's say you were going with 25% and …

  9. #131: Tinkering With Flexbox

    In this video we tackle a little front end layout problem that would have been pretty much impossible without flexbox. I wrote up an article about it too, for easier reference of code.…

  10. Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements

    a CSS-Tricks reader wrote to me with a layout question. A variety of elements need to be arranged in a horizontal bar. Some of fixed size, some vary, and one needs to take up the rest of the space. Flexbox is beautifully suited for this, so I explain with that.
  11. Using Flexbox: Mixing Old and New for the Best Browser Support

    Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids …

  12. Squeezy Stretchy Flexbox Nav

    I saw an interesting take on off-canvas navigation the other day over on The New Tropic. It wasn't the off-canvas part so much. It was how the elements within the nav took up space. They stretched out to take up all the space, when available, but never squished too far. Those are concepts that flexbox makes pretty easy to express! Let's dig in a little.…

  13. The peculiar magic of flexbox and auto margins

    In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be a filing cabinet that’s entirely empty, and when I try to look something up, all I find is an almost illegible sticky note instead.

    One topic like this (which is …

  14. Useful Flexbox Technique: Alignment Shifting Wrapping

    I just ran into a situation where I had a title that was split into two sections. The main title, big and bold, left-aligned like any regular title. But then a bit of a subtitle, right-aligned, sitting on the same line as the title. When there is room for that, it's great. But of course text is always changing and the space you have available is variable. Let's take a look.…

  15. Does CSS Grid Replace Flexbox?

    No. Well. Mostly No.

    Grid is much newer than Flexbox and has a bit less browser support. That's why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

    To put a point on it:

    1. Grid can do things Flexbox can't do.
    2. Flexbox can do things Grid can't do.
    3. They can work together: a grid item can be a flexbox container. A flex item can be a grid container.
  16. `flex-grow` is weird. Or is it?

    The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis.

    When I found out about flex-grow, I made a simple demo to find out what it did and how it worked.
    I thought I got everything figured out, but when I tried it on a website a colleague has recently made, …

  17. A Quick Way to Remember the Difference Between `justify-content` and `align-items`

    I was talking with a pal the other day and moaning about flexbox for the millionth time because I had momentarily forgotten the difference between the justify-content and align-items properties.

    "How do I center an element horizontally with flex again?” I wondered. Well, that was when she gave me what I think is the best shorthand way of remembering how the two work together.…

  18. Sticky Footer, Five Ways

    A brief history, if you will.

    The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.…

  19. The Media Object, A Bunch of Ways

    The Media Object pattern is: image thingy on the left, heading and text on the right.

    That's what Nicole Sullivan called it and the name stuck. It's a pretty simple pattern, but like all things web design, it can be done many ways.…

  20. flex-wrap

    The flex-wrap property is a sub-property of the Flexible Box Layout module.

    It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in.

    Reminder: the cross axis is the axis perpendicular to the main axis. Its direction depends on the main axis direction.

    The flex-wrap property accepts 3 different values:

    • nowrap (
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag :)