Sunday June 6, 2021 By David Quintanilla
A Comprehensive Guide to Flexbox Sizing

Flexbox sizing makes it doable to create versatile layouts that absolutely adapt to the display screen. When you arrange every thing accurately you gained’t must depend on media queries to assist totally different viewports, layouts, and orientations.

On this information I’ll present you use the next flexbox sizing properties:

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex 

Explainer: Flexbox Sizing

Filling up Free House

One of the vital difficult facets of writing CSS is determining allocate the free area that is still on the display screen after the web page has been populated with content material. At some viewport sizes, you’ll typically discover there’s an excessive amount of remaining area and also you need to fill it with one thing. At different viewport sizes, you may discover there’s not sufficient area, and the format breaks in a method or one other.

Flexbox’s sizing properties let you make selections about three sorts of situations:

  1. flex-grow: how flex objects ought to behave when there’s a surplus of free area (how they need to develop).
  2. flex-shrink: how flex objects ought to behave when there’s a scarcity of free area (how they need to shrink).
  3. flex-basis: how flex objects ought to behave when there’s precisely as a lot area as wanted.

As flexbox is a one-dimensional format, versus CSS Grid which is two-dimensional, you’ll be able to allocate free area alongside the principle axis (whether or not that be high to backside, backside to high, left to proper, or proper to left). You’ll be able to set the course of the principle axis utilizing the flex-direction property. When you want a refresher on how this works check out my tutorial about flexbox alignment.

The cross axis is always perpendicular to the main axis The cross axis is always perpendicular to the main axis The cross axis is always perpendicular to the main axis
A reminder of how the principle axis and the cross axis work together.

The commonest flex-direction used on left-to-right web sites is row, which implies you’ll be able to allocate free area on the left-to-right axis. This additionally occurs to be the default worth of flex-direction, so I’ll use it within the following examples.

1. Optimistic Free House: flex-grow

The flex-grow property defines how any additional area in-between flex objects ought to be allotted on the display screen. A very powerful factor to recollect about flexbox sizing is that flex-grow doesn’t divide up your complete flex container, solely the area that is still after the browser renders all flex objects. If there’s no surplus of area, flex-grow has no impact.

 Let’s begin with the next HTML:

The  .container class would be the flex container (outlined by show: flex;) and our .merchandise components would be the flex objects:

With out telling the browser what to do with the remaining area, that is how flex objects are allotted on the display screen:

The browser has used the default worth of flex-grow, which is 0, and provides us whole inflexibility. This association is perhaps a very good resolution for some layouts, nevertheless, you too can make the objects cowl the entire area by setting flex-grow to 1:

As you’ll be able to see under, the flex objects have stretched out and crammed the entire obtainable area:

Within the above instance, all flex objects have the identical flex-grow worth, so that they develop on the similar charge. Nevertheless, you too can make them develop based on totally different ratios. As an illustration, .item-1 can take up twice as a lot of the obtainable area as the opposite objects. We’d write that as follows:

Equally, you’ll be able to set a unique flex-grow worth for every flex merchandise to make them develop relative to one another. Mess around with the values on this instance and see how they have an effect on the format:

2. Damaging Free House: flex-shrink

The flex-shrink property is the alternative of flex-grow. It defines how flex objects ought to behave when there’s not sufficient area on the display screen. This occurs when flex objects are bigger than the flex container.

With out flex-shrink, the next CSS would lead to a format the place the objects overflow the container, as the full width of the objects (3*10rem) is larger than the container’s width (20rem).

no flex-shrinkno flex-shrinkno flex-shrink
Hypothetical world with out flex-shrink..

Fortunately for us, flex-shrink is implied, taking over the default worth of 1, giving us a format the place the objects match into the container though there’s not sufficient area:

When flex-shrink is 1, flex objects are absolutely versatile and when there’s not sufficient area, they shrink along with the flex container. 

Following the identical logic, you can also make flex objects absolutely rigid when there’s unfavorable area on the display screen. You solely must set flex-shrink to 0 and the objects will overflow the flex container:

Equally to flex-grow, you too can set a unique flex-shrink worth for every flex merchandise in order that they’ll shrink comparatively to one another. Mess around with the values on this instance and see what influence they’ve:

Testing the above demo you might need seen that bigger flex-shrink values result in narrower flex objects. As an illustration, the next CSS ends in a format the place .item-3 is the narrowest merchandise:

greater flex-shrink value on the third itemgreater flex-shrink value on the third itemgreater flex-shrink value on the third item

It’s because flex-shrink defines how a lot a flex merchandise ought to shrink in comparison with different objects. Thus, bigger flex-shrink values result in smaller components, which may make issues fairly complicated!

3. No Remaining House: flex-basis

The final situation of free area allocation is when there’s precisely as a lot area on the display screen as you want. That is when flex objects will take the worth of flex-basis

The flex-basis property defines the preliminary measurement of flex objects. The default worth of flex-basis is auto, which signifies that the scale of the flex objects is calculated utilizing both the width or peak of the factor (relying on if it’s a row-based or column-based format). 

Nevertheless, when the worth of flex-basis is one thing aside from auto, it overrides the worth of width (or peak in case of vertical layouts). For instance, the next CSS overrides the default width: 20rem; rule with a respective worth for every flex merchandise:

Moreover size items, percentages, and auto, you too can use the content material key phrase as a price for flex-basis. It is going to make a flex merchandise as broad because the content it holds.

As flex-basis defines the preliminary worth of flex objects, it is the foundation the browser makes use of to calculate flex-grow and flex-shrink. Notice that whereas flex-grow and flex-shrink have relative values (0, 1, 2, and so forth.), flex-basis all the time takes an absolute worth (px, rem, content material, and so forth.).

The flex Shorthand

Flexbox’s sizing properties even have a shorthand referred to as flex. The flex property abbreviates flex-grow, flex-shrink, and flex-basis within the following approach:

You don’t essentially must record all of the three values in case you don’t need. You should use flex with one or two values, based on the next guidelines and assumptions:

It’d take some time to get used to the flex shorthand, however the W3C docs really recommend utilizing it, as an alternative of the longhand properties:

“Authors are inspired to regulate flexibility utilizing the flex shorthand slightly than with its longhand properties straight, because the shorthand accurately resets any unspecified parts to accommodate frequent makes use of.”


There we’ve got it: you’ll be able to fully management flexibility with flexbox’s sizing properties! On this tutorial, I used a horizontal format set by flex-direction: row, so area allocation occurred alongside the horizontal (left to proper) axis and flex-growflex-shrink, and flex-basis modified the width of the flex objects. 

When you take what we lined and apply it to a vertical format set by flex-direction: column, allocation will occur alongside the vertical (top-to-bottom) axis and the sizing properties will modify the peak of the flex objects.

This tutorial is a part of my Complete Information to Flexbox collection. To totally perceive how flexbox works, you should definitely take a look at the opposite components:

Source link

Leave a Reply