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

Flexbox sizing makes it attainable to create versatile layouts that totally adapt to the display screen. Should you arrange every part accurately you gained’t must depend on media queries to help totally different viewports, layouts, and orientations.

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

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

Explainer: Flexbox Sizing

Filling up Free Area

One of the difficult elements of writing CSS is determining easy methods to allocate the free house that continues to be on the display screen after the web page has been populated with content material. At some viewport sizes, you’ll usually discover there’s an excessive amount of remaining house and also you need to fill it with one thing. At different viewport sizes, you would possibly discover there’s not sufficient house, and the format breaks in a method or one other.

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

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

As flexbox is a one-dimensional format, versus CSS Grid which is two-dimensional, you’ll be able to allocate free house alongside the principle axis (whether or not that be high to backside, backside to high, left to proper, or proper to left). You possibly can set the path of the principle axis utilizing the flex-direction property. Should 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 house 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. Constructive Free Area: flex-grow

The flex-grow property defines how any further house in-between flex gadgets must 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 house that continues to be after the browser renders all flex gadgets. If there’s no surplus of house, 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 house, 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 may be answer for some layouts, nevertheless, you too can make the gadgets cowl the entire house by setting flex-grow to 1:

As you’ll be able to see beneath, the flex gadgets have stretched out and crammed the entire obtainable house:

Within the above instance, all flex gadgets have the identical flex-grow worth, in order that they develop on the identical price. Nevertheless, you too can make them develop based on totally different ratios. For example, .item-1 can take up twice as a lot of the obtainable house as the opposite gadgets. We’d write that as follows:

Equally, you’ll be able to set a special 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. Adverse Free Area: flex-shrink

The flex-shrink property is the alternative of flex-grow. It defines how flex gadgets ought to behave when there’s not sufficient house 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 format the place the gadgets overflow the container, as the whole 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 over the default worth of 1, giving us a format the place the gadgets match into the container despite the fact that there’s not sufficient house:

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

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

Equally to flex-grow, you too can set a special 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 influence they’ve:

Testing the above demo you might need seen that bigger flex-shrink values result in narrower flex gadgets. For example, 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 gadgets. Thus, bigger flex-shrink values result in smaller components, which might make issues fairly complicated!

3. No Remaining Area: flex-basis

The final state of affairs of free house allocation is when there’s precisely as a lot house 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 implies that the dimensions of the flex gadgets is calculated utilizing both the width or top of the ingredient (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 top 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 models, percentages, and auto, you too can use the content material key phrase as a worth for flex-basis. It’s going to make a flex merchandise as huge 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 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 means:

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

It would 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 manage flexibility utilizing the flex shorthand quite than with its longhand properties instantly, because the shorthand accurately resets any unspecified elements to accommodate frequent makes use of.”


There now we have 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 house allocation occurred alongside the horizontal (left to proper) axis and flex-growflex-shrink, and flex-basis modified the width of the flex gadgets. 

Should you take what we coated 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 top of the flex gadgets.

This tutorial is a part of my Complete Information to Flexbox sequence. To completely perceive how flexbox works, you should definitely try the opposite elements:

Source link

Leave a Reply