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

Flexbox sizing makes it potential to create versatile layouts that totally adapt to the display screen. For those who arrange every thing accurately you received’t should depend on media queries to assist totally different viewports, layouts, and orientations.

On this information I’ll present you learn how to 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 features of writing CSS is determining learn how to 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 wish to fill it with one thing. At different viewport sizes, you may discover there’s not sufficient area, and the structure breaks in a technique or one other.

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

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

As flexbox is a one-dimensional structure, versus CSS Grid which is two-dimensional, you possibly can allocate free area alongside the primary axis (whether or not that be prime to backside, backside to prime, left to proper, or proper to left). You may set the route of the primary axis utilizing the flex-direction property. For those who 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 primary axis and the cross axis work together.

The most typical flex-direction used on left-to-right web sites is row, which suggests you possibly can 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 gadgets must be allotted on the display screen. Crucial 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 gadgets. 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 gadgets:

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

The browser has used the default worth of flex-grow, which is 0, and offers us complete inflexibility. This association is perhaps a superb answer for some layouts, nevertheless, you can too make the gadgets cowl the entire area by setting flex-grow to 1:

As you possibly can see beneath, the flex gadgets have stretched out and crammed the entire accessible area:

Within the above instance, all flex gadgets have the identical flex-grow worth, so that they develop on the identical price. Nonetheless, you can too make them develop based on totally different ratios. As an illustration, .item-1 can take up twice as a lot of the accessible area as the opposite gadgets. We might write that as follows:

Equally, you possibly can set a distinct 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 structure:

2. Unfavorable Free House: flex-shrink

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

With out flex-shrink, the next CSS would end in a structure the place the gadgets overflow the container, as the overall width of the gadgets (3*10rem) is greater 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 up the default worth of 1, giving us a structure the place the gadgets match into the container though there’s not sufficient area:

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

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

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

Testing the above demo you may need observed that bigger flex-shrink values result in narrower flex gadgets. As an illustration, the next CSS ends in a structure 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 is because flex-shrink defines how a lot a flex merchandise ought to shrink in comparison with different gadgets. Thus, bigger flex-shrink values result in smaller components, which may make issues fairly complicated!

3. No Remaining House: flex-basis

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

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

Nonetheless, 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:

Apart from size models, percentages, and auto, you can too use the content material key phrase as a worth for flex-basis. It is going to make a flex merchandise as extensive because the content it holds.

As flex-basis defines the preliminary worth of flex gadgets, 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 on.), flex-basis all the time takes an absolute worth (px, rem, content material, and so on.).

The flex Shorthand

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

You don’t essentially should record all of the three values should 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 a substitute of the longhand properties:

“Authors are inspired to regulate flexibility utilizing the flex shorthand relatively than with its longhand properties immediately, because the shorthand accurately resets any unspecified elements to accommodate widespread makes use of.”


There we have now it: you possibly can utterly management flexibility with flexbox’s sizing properties! On this tutorial, I used a horizontal structure 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 gadgets. 

For those who take what we lined and apply it to a vertical structure 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 gadgets.

This tutorial is a part of my Complete Information to Flexbox collection. To totally perceive how flexbox works, you’ll want to take a look at the opposite elements:

Source link

Leave a Reply