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

Flexbox sizing makes it potential to create versatile layouts that absolutely adapt to the display screen. When you arrange all the things accurately you received’t should depend on media queries to assist completely different viewports, layouts, and orientations.

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

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

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

As flexbox is a one-dimensional structure, versus CSS Grid which is two-dimensional, you possibly can allocate free house alongside the primary 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 primary 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 primary axis and the cross axis work together.

The commonest flex-direction used on left-to-right web sites is row, which suggests you possibly can 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 House: flex-grow

The flex-grow property defines how any additional house in-between flex objects must be allotted on the display screen. An important factor to recollect about flexbox sizing is that flex-grow doesn’t divide up the complete flex container, solely the house that is still after the browser renders all flex objects. 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 objects:

With out telling the browser what to do with the remaining house, 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 complete inflexibility. This association could be a very good answer for some layouts, nevertheless, you may also make the objects cowl the entire house by setting flex-grow to 1:

As you possibly can see under, the flex objects have stretched out and stuffed the entire out there house:

Within the above instance, all flex objects have the identical flex-grow worth, in order that they develop on the similar price. Nevertheless, you may also make them develop in response to completely different ratios. For example, .item-1 can take up twice as a lot of the out there house as the opposite objects. We’d 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. Unfavourable 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 house 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 structure the place the objects overflow the container, as the overall 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 structure the place the objects match into the container though there’s not sufficient house:

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

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

Equally to flex-grow, you may also set a distinct 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 may need seen that bigger flex-shrink values result in narrower flex objects. For example, 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 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 house allocation is when there’s precisely as a lot house 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 dimensions of the flex objects is calculated utilizing both the width or top of the component (relying on if it’s a row-based or column-based structure). 

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:

Apart from size models, percentages, and auto, you may also use the content material key phrase as a price for flex-basis. It’s going to make a flex merchandise as large 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. Be aware 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 referred to as flex. The flex property abbreviates flex-grow, flex-shrink, and flex-basis within the following manner:

You don’t essentially should checklist all of the three values should you don’t need. You should use flex with one or two values, in response to 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 relatively than with its longhand properties immediately, because the shorthand accurately resets any unspecified elements to accommodate frequent makes use of.”


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

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

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

Source link

Leave a Reply