Use Cases For Flexbox, by Rachel Andrew

Photography |Free-Photos

This is the last article in the Flexbox series. I’ll spend some time explaining the use scenarios for Flexbox, and since we now have Grid layouts, I’ll explain and suggest how to choose between them and each use scenario.

Series of early articles

If you haven’t read any of the other articles in this series, do so now. I started by talking about what happens when we use display: Flex; The second part looked at alignment, how to do alignment on axes and cross axes; The third article explains how box sizes are formed in Flexbox and how the browser assigns box sizes by default. Now that we understand how Flexbox works, let’s review the use case scenarios for which it is best suited.

Should I use Grid or Flexbox?

This is a question I get asked a lot when I teach layout, and I find that as people get used to these new layout methods, it becomes less of a problem. After you have written a number of component styles, you will know how to use these layouts wisely.

If you have to figure out what’s going on, the first thing to remember is that the Grid layout and Flexbox layout are BOTH CSS. Whether you use Dispaly: Grid or Display: Flex, you usually use the more common parts of them, not the different parts. Grid and Flexbox both use properties defined in the Box Alignment specification, and both use CSS intrinsic and extrinsic dimensions to detail their concepts.

Asking whether to use Grid or Flexbox is like asking if I should use font or color. The answer is to use both as needed. If you make a mistake, no one will blame you.

So we’re not choosing between vue.js and react.js, or Bootstrap and Foundation. We just use CSS for layout, using the part of CSS that best fits our current design. Consider which layout is best for each component, or which combination will produce the best layout.

It could be Grid, it could be Flexbox. Maybe there’s a Grid container outside, some of the Grid projects are Flex projects, or vice versa. It is fine to nest a Grid container in a Flex project if your design requires it.

What is Flexbox for?

The Flexbox specification describes it as follows:

“Flexbox is superficially similar to a block layout. But it lacks many of the complex text – or document-centric properties that can be used in block layouts, such as floats and columns (Cloumns). Instead, it uses simple and powerful tools to tackle the space allocation and content alignment issues that are often encountered in complex Web applications.”

I think the key word here is “space allocation and content alignment”. Flexbox includes a bunch of things (in different sizes) in a container (the size of the container itself can change). Flexbox is very gentle and tries to find the best display for all items, allocating more space to large items and less space to small items in order to keep the content readable.

When you feel uncomfortable or uncomfortable using Flexbox at some point, you are using Flexbox as a grid system — trying to control the allocation of size and space. In this case, you are rebelling against the natural elasticity of the Flexbox.

So, for Flexbox, you’re not laying out a Flex project with pixel accuracy, you just want it to sit right next to each other in a decent way.

See the Pen Smashing Flexbox Series 4: Items Sharing Space by Rachel Andrew

Another scenario you’ll encounter is project folding, but you don’t want a strict web folding (i.e., both at once). We can use the creative keyword auto-fill provided for us in Grid to compare to the folded Flexbox layout example. You can immediately see the difference.

In the Grid layout case, the Grid project is aligned on rows and columns one by one. Although the number of Cloumn tracks changes (depending on the current space), the Grid project always lays out the location of the next Grid cell based on the current available space. In fact, we can’t make a Grid project span tracks, even if there are empty cell locations in this auto-flow scenario.

See the Pen Smashing Flexbox Series 4: Grid Example by Rachel Andrew

In the Flexbox layout example, the last Flex project would fill up the remaining space in that row. So we can’t do horizontal or vertical alignment.

See the Pen Smashing Flexbox Series 4: Wrapped Items flex-basis: auto by Rachel Andrew

Flex: 1 1 150px; flex: 1 1 150px; Flex projects with a lot of content will have more space, so the alignment between lines will be very different.

See the Pen Smashing Flexbox Series 4: Wrapped Items by Rachel Andrew

Of course, there are scenarios where Flexbox layout is better than Grid layout. For example, we need to display items in a folded line, while allocating space for items on a line by line basis. This is a different form of grid layout. For a real-world scenario, for example, there are a series of labels (a set of elements composed of one or two words displayed as a collection), each of which occupies the required space and is not forced into a strict grid layout.

See the Pen Smashing Flexbox Series 4: Tags example by Rachel Andrew

Flexbox is now the best way to center items horizontally and vertically in a container.

See the Pen Smashing Flexbox Series 4: Center an Item by Rachel Andrew

In the future (if the browser also supports Box Alignment in addition to elastic layouts), we may be able to do this without dispPlay: Flex. Now, we’re still going to do this — but the extra line of code doesn’t matter.

Flexbox is well suited for one-line style layouts that contain groups of components. We can flexibly layout information, such as a collection of form controls or ICONS, without worrying about the size of each item.

See the Pen Smashing Flexbox Series 4: Simple Row of Form Elements by Rachel Andrew

Another scenario where you might choose Flexbox is to have the bottom element content fixed at the bottom of a layout with less than one screen of content. In the following example, the container is a Flex container, and the Flex project is laid out in the direction of Column. We set the content block in the middle to grow, so that the bottom content is pushed to the bottom of the viewport.

See the Pen Smashing Flexbox Series 4: Sticky Footer Card by Rachel Andrew

In a production environment, we found the Flexbox layout to be very good for small tasks such as good alignment and good allocation of space between projects. Of course, you can do all of these things with a one-dimensional Grid layout without worrying about whether it’s the right thing to do.

Another good thing about Flexbox performance is that it can be very helpful when we suddenly add something to the previous design. For example, if we design a navigation bar component, if we use Grid, then we need to design our Tracks for all navigation items, and when “more items”, according to the previous design, the items will fold, which we don’t want to fold. With Flexbox, the situation is different. With Flexbox, whether we set the project Flex-basis to 0 or auto, the final layout is flexible, with existing projects making room for new ones.

When will I not use Flexbox?

I’ve shown you scenarios that use elastic layouts (rather than grid layouts), now let’s look at some scenarios where Flexbox layouts don’t work. We have seen examples of lines of items aligned vertically or horizontally. This is the first area where we want to differentiate ourselves from Grid layouts.

A grid layout is a two-dimensional layout that enables alignment on both rows and columns. Flexbox has a one-dimensional layout, where the Flex container of a multi-line Flex project is allocated row by row, and each Flex line behaves like a new Flex container.

So if your components need to be laid out in two dimensions, no matter how big or small the components themselves, you’re better off using Grid rather than Flexbox. One of the things I want you to know after reading this article is that you should never think that Grid is primarily responsible for the body layout of the page, while Flexbox is primarily responsible for the component layout. The reality is that you can have a small component that uses a Grid layout and a main page structure that uses a Flexbox layout.

Another scenario where Gird is considered to be a better layout scheme is when you give Flex items a width or a Flex-basis of the same length in order to align them with Flex items on adjacent rows to limit the elastic effect. This usually means that you need a two-dimensional layout scheme, and control from the Grid container is more appropriate.

Of course, by limiting the elastic nature of Flex projects, we can make Flex layouts look like grids. For example, by setting flex-Grow to 0 and giving flex project a percentage size, we can create a “floating grid” effect in the same way. If you find yourself doing this, I suggest you stick with Grid layouts, which are great for this type of layout.

See the Pen Smashing Flexbox Series 4: Wrapped Flex Items with Percentage Widths by Rachel Andrew

The final thing to remember is that there is usually no clear wrong or right answer to the same question. The only thing we can do is experiment and see what layout the component fits into. It is also possible to switch layouts, using Flexbox at one breakpoint and Grid at another.

conclusion

I hope this series of articles will help you understand the confusion of the Flex project with alignment and sizing, and make you more comfortable with flexible layouts. If you still don’t understand or are unsure about which layout method to use, feel free to leave a comment below.

(after)