Flexbox usage examples

I continue to publish Rachel Andrew articles on the features of Flexbox CSS technology .

Previous articles of the cycle:

1. What happens when you create a Flexbox container .
2. Everything you need to know about alignment in the Flexbox .
3. Flexbox: how big is this flexible box? .

---

We come to the final part of my Flexbox series here in Smashing Magazine . In this post, I’m going to spend some time thinking about what the Flexbox options are actually using, given that we now have a CSS Grid Layout , I’ll give some suggestions on what you can use when and how.

Earlier in this series

If you haven't selected other articles yet, this is essentially the final post, so look at them first. I start by describing what happens when creating a flex container . In the second article of the series, I looked at the alignment and how we align the elements along the main and transverse axes during flexbox . In the third article, I unpack how resizing in the Flexbox works , and how the browser determines how large the flex element should be. Now that we know exactly how Flexbox works, we can turn around to think about the use cases for which this is best.

Should I use a Grid or Flexbox?

This is still the main question I’m asked when I learn how to build, and in general I think that as people get used to working with new methods, it becomes a question that you need to ask yourself less often. As your experience grows, you will understand which layout method to use.

However, if you are just starting to grasp this idea, remember that CSS Grid Layout and Flexbox are both CSS. If you specify display: grid or display: flex , you often use more common than differences. Both Grid and Flexbox use properties that are part of the Box Alignment specification; both rely on concepts detailed in the Intrinsic and Extrinsic Sizing CSS specification . .

Asking whether your design should use a Grid or Flexbox is similar to the question of whether your design should use font size or color. You should probably use both if required. And no one will haunt you if you use the wrong one.

So we don’t choose between Vue.js and React , Bootstrap or Foundation . We use CSS to build, and we need to use CSS particles that make the most sense for a particular part of our design that we are working on. Review each component and decide what is best for it, or which combination of elements is best for it.

This can be a Grid , or it can be a Flexbox . This may be an external Grid container in which some mesh elements become flexible or reversible. There is no problem with the nesting of the grid in the flex element, if this is required for your project.

What is Flexbox really?

The Flexbox specification describes the layout method as follows:

" Flex layout looks similar to block layout . It lacks many more complex text or document-oriented properties that can be used in block layout, such as floats and columns . Instead, it received simple and powerful tools for allocating space and leveling content in a way that which web applications and complex web pages have long needed. ”

I think the key phrase here is “space allocation and content alignment”. Flexbox is all about taking a bunch of items (which have different sizes) and putting them in a container (which itself can be a variable size). Flexbox is soft. He tries to create the best layout for our elements, giving larger elements more space, and smaller elements less space, thereby preserving the readability of the content.

If people find the Flexbox challenging and mysterious, it is often because they are trying to use the Flexbox as a grid system , trying to regain control over the size and distribution of space. When you do this, the Flexbox may seem strange and difficult because you are struggling with what Flexbox does, i.e. with its inherent flexibility.

Therefore, templates that are very well suited for flexible layout are those in which we are not so interested in having the ideal size of each element. We just want these elements to appear next to each other.

There are also templates in which you want to have lines with hyphenation, but you do not need a strict grid. If we take the original Grid vs. Flexbox example , where we use the syntax repeat auto-fill in the grid, and then the flex-container with line breaks , we will immediately see the difference between these two methods.

In the Grid example, the grid elements are arranged in rows and columns. When the number of track columns changes (depending on the space), the elements always go to the next available grid cell. In fact, there is no way to request a mesh element to surround a track in order to fill in an auto-flow script if there are other empty cells.

In the flex example, the totals share the space left between them, so we do not use the horizontal and vertical alignment.

If we have flex-basis set to auto , and any of the flex elements increases, then the rest will also be provided with additional space so that the alignment can be different from line to line.

This is a very vivid example of where we would like to use the Flexbox over the Grid Layout . If we want the elements to be wrapped, but to occupy the space they need, in rows. This is very different from the grid. Patterns like this can be a set of tags (one or two words that you want to display well as a set of elements) that take up the necessary space and are not rigidly inserted into a strict grid.

Currently, Flexbox is also the best way to perform the vertical and horizontal centering of an element inside a container.

In the future (if browser support for Box Alignment properties outside the flexible layout), we can do this without adding display: flex to the container. At the moment, however, all you need to do is an extra line of CSS, which is not a problem.

The Flexbox does very well with small one-dimensional components. Sets of form fields, icons, or other information can be easily located and allowed to be flexible without the need to carefully size each element.

You can also select the Flexbox in scenarios where the content needs to be brought to the bottom of the container without letting it float. In the example below, I make the container in a flex container, displaying the contents as a column, and then let the middle grow, pushing the footer down the component.

When developing, I find that Flexbox is useful for many small tasks, performing proper alignment, distributing the space between elements. You can certainly use a one-dimensional grid container for some of these tasks, and not worry about what you decide to do.

However, I think that the Flexbox will be the best in a situation when you need to add additional elements that I did not expect in my design. For example, if I have a navigation component using a Grid , I would create enough tracks for all elements, since I would not want a new line to be created if I had “too many” elements. With flexbox , long enough, I would allow the elements to be flexible with flex-basis 0 (or auto ), then the elements themselves would let the new companion into the line, freeing him a place.

When should you not use the Flexbox?

We looked at some of the considerations for which, I think, you should prefer the Flexbox before the Grid layout, so now we can explore some of the places where the Flexbox may not be the best choice. We have already looked at our Flexbox example against a grid with elements aligned horizontally and vertically against elements that occupy space line by line. And this difference is the first thing to consider.

The mesh example has a two-dimensional layout. Layout row and column at the same time.

The Flexbox example is a one-dimensional layout. We have packed flex strings, but placement in space is line by line. Each line, in fact, acts as a new flex-container in the Flex-direction.

Therefore, if your component needs a two-dimensional layout, you'd better use a Grid , not a Flexbox . It does not matter whether it is a large or small component. If you take one thing from this article, then remove the idea from your head that the Grid is for some reason intended only for the layout of the main page, and Flexbox for the components. You can have a tiny component that requires a two-dimensional layout, and a homepage structure that best suits a one-dimensional layout.

Another good place where a grid can be considered the best solution is to use width or set flex-basis as a unit of length for your flex elements to align with another line of flex elements or simply limit flexibility in some way. Quite often, this indicates either that you really need a two-dimensional layout method, or that the control from the grid container is better suited to your layout.

For example, we could make our flexible layout more similar to the Grid , limiting the flexibility of our elements. Setting flex-grow to 0 and calculating the size of elements in percent, similar to how we determined the size of elements in the floating grid. If you find that you are doing this, I would suggest that the grid layout is the best approach because it is designed for this type of layout.

With all this said, remember that very often there is no clear right or wrong answer. Sometimes the only thing you can do is try different methods and see what is best for the component. Remember that you can also switch layout methods using the Flexbox at one breakpoint and the Grid at another.

And so, we turn off!

I hope that this Flexbox series has been useful and has shown how understanding some flex-element alignment and calibration algorithms makes life easier when working with them.

If you have any unresolved questions or you have a template that does not seem to have an obvious answer in terms of the layout method used, leave a comment.