Create Web Page Layouts With CSS

You may recall the fr unit from the chapters on CSS Grid. The fr unit is a really handy measurement unit that allows elements in a container to take up space relative to each other depending on the container width.

In Flexbox, you can control element sizing using several different properties. Let's go through them now.

flex-basis

By setting a  flex-basis  property on your elements, you control the space they take up along the container's main axis. That means setting flex-basis on a row will affect the elements' widths. Setting flex-basis on a column will affect the elements' heights.

You may recall that in the starter CSS for our example, we set each element's width using a basic width property:

.item {
  width: 100px;
}

This can be replaced by  flex-basis  , and the elements will take up the same space along the main axis!

.item {
  flex-basis: 100px;
}

Growing elements with flex-grow

It's rare that you'll want all your elements to be the same width in your layouts! Elements that are all the same size give no sense of informational hierarchy or importance, plus they just look dang repetitive.

In order to grow elements within a Flexbox container to make them larger than their neighbors, use a property called  flex-grow  .

Let's set the  flex-grow  value of an element to 1 to begin:

.item {
  flex-grow: 1;
}

Setting  flex-grow  to 1 for every single item makes the elements take up the full width of the container. All the elements are the same width because they all have the same  flex-grow  value. 

What's really interesting about setting flex-grow values is that they are relative. For example, if we increase the  flex-grow  value to something absurd like 6000, the result is the same:

.item {
    flex-grow: 6000;
}

When every element is set to the same  flex-grow  value, they'll all expand to take up the full width of the container, no matter what the value is, as long as it's a positive number.

Things actually get interesting when we set values relative to each other. Now, instead of setting flex-grow on every element, I'll set it on every element by default with the  item  class but then specify on the 1st and 6th elements that their  flex-grow  should be different:

.item {
  flex-grow: 1;
}

.container div:nth-child(1), div:nth-child(6) {
  flex-grow: 2;
}

Now, our  flex-container  is essentially divided into 8 spots. The first element takes up 2 of those spots, the second through fifth elements take up 4 of those spots, and the last element takes up 2 of those spots. 

Shrinking elements with flex-shrink

I find growing elements to take up available space more intuitive to understand than shrinking elements when there's not enough space. However, you can still set an "opposite" property to  flex-grow  called  flex-shrink  .

Similar to  flex-grow  ,  flex-shrink  controls how elements will lose width (for rows) or height (for columns) when a flex container does not have enough space for them.

Consider that  flex-shrink  is 1 for all elements by default. If we therefore set  flex-shrink: 3;  on our first and sixth elements, they'll shrink at 3 times the rate of the other elements as the browser window is resized:

.item {
  flex-basis: 100px;
}

.container div:nth-child(1), div:nth-child(6) {
  flex-shrink: 3;
}

The flex shortcut

All three properties you just learned (  flex-basis  ,  flex-grow  , and  flex-shrink  ) can be combined into one handy property called  flex  .

The  flex  property takes the 3 values in this order:

1. flex-grow

2. flex-shrink

3. flex-basis

Therefore, take a guess at what the following code represents:

.container div:nth-child(2) {
  flex: 1 3 100px;
}

This means the second element in the container will have a  flex-grow  of 1 (default), a  flex-shrink  of 3 (meaning it will shrink 3 times faster than the other elements), and a  flex-basis  of 100px (it's starting "width" if you will). 

Your Turn

Try adjusting element sizes in this interactive exercise!

In style.css, find the style rules for each child of the div with the class of container.

Set each child to have a width of 200px.

On any of the child elements, use the flex shorthand property to set:

• a flex-grow of 2 (so the element grows twice as fast as the others),

• a flex-shrink of 1 (so it shrinks at the same rate),

• and a flex-basis of 100px. 

Check out your changes. Resize the window to see how flex-grow and flex-shrink values affect the result! 

Recap

• Use  flex-basis  to ensure that elements take up the same amount of space on the x-axis. 

• Use  flex-grow  to make elements bigger than the ones next to them. 

• Use  flex-shrink  to reduce the size of certain elements when there's not enough space. 

• All three properties can be combined into a single property called  flex  .