Flexbox and CSS Grid Part. 3

IamManchanda

24.5K views

GitHub

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

Part 3 - Flex Items (Flex Grow, Flex Shrink and Flex Basis)

This article is Part 3 for the series “Flexbox and CSS Grid”.

In previous article, we learned on how to globally lay out all the flex items within a flex container by adding flexbox property values to that container. The flexible box layout specification provides several additional properties applicable directly to flex items. With these flex item–specific properties, we can more precisely control the layout of individual flex containers’ non-anonymous flex items.

The children of the flex container are called flex items, be they DOM nodes, non-empty text nodes, or generated content. When it comes to text-node children of flex containers, if the text node is not empty (containing content other than whitespace) it will be wrapped in an anonymous flex item, behaving like its flex item siblings. While these anonymous flex items do inherit all the flex properties set by the flex container, just like their DOM node siblings, they are not directly targetable with CSS. Thus, we can’t directly set any of the flex item–specific properties on them.

The margins of flex items do not collapse. The float and clear properties don’t have an effect on flex items, and do not take a flex item out of flow. Additionally, vertical-align has no effect on a flex item. However, the float property can still affect box generation by influencing the display property’s computed value.

Flex Items: Absolute Positioning

While a value of float: left or float: right on the child of a flex container does not float the item—as the child is a flex item and the floatis ignored—setting position: absolute is a different story. The absolutely-positioned children of flex containers, just like any other absolutely-positioned element, are taken out of the flow of the document. They do not get converted to flex items. They are not in the document flow. They do not participate in flex layout.

However, they can be impacted by the properties set on the flex container, just like a childcan be impacted by a parent element that isn’t a flex container. In addition to inheriting inheritable properties as they would had the parent not been a flex container, the parent’s properties impact the origin of the positioning. The absolutely positioned child of a flex container is impacted by both the justify-content value of the parent flex container and its own align-self value, if there is one.

For example, if you set align-content: center; on the absolutely positioned child, it will by default be centered on the flex container parent’s cross-axis. The order property may not impact where the absolutely-positioned flex container child is drawn, but it does impact the order of when it is drawn in relation to its siblings.

Flex Grow

The flex-grow property defines whether a flex item is allowed to grow or not based on available space, and, if it is allowed to grow and there is available space, how much will it grow proportionally relative to the growth of other flex item siblings.

If the flex items are been laid out within the flex line such that they don’t take up the entire space on that line, then you can “expand” the flex items in such a way that they will fill up the entire line. The amount of available space on the line can be distributed among the flex items following a specific proportion that you can specify using the flex-grow property. The higher the flex-grow value, the more the item will be allowed to grow relative to the other items.

Negative numbers are not allowed. Float values, as long as they are greater than 0, are valid. The value specifies the growth factor, which determines how much the flex item will grow relative to the rest of the flex item siblings as the flex container’s free space is distributed. If there is any available space within the flex container, the space will be distributed proportionally among the children with a nonzero positive growth factor based on the various values of those growth factors.

Flex Grow

/* Tutorial specific CSS */
.container {
  display: flex;
}
.item {
  flex-grow: 1;
}
.item.two {
  flex-grow: 3;
}
/**
 * Demo Styles
 */
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
hr {
  margin: 50px 0;
}
.container {
  margin: 150px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #1779ba;
}
.item {
  background-color: #fff;
  width: 100px;
  height: 100px;
  margin: 1%;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #1779ba;
}
.controls {
  background-color: white;

Codepen also available

Flex Shrink

The flex-shrink property specifies the shrink factor. The shrink factor determines how much a flex item will shrink relative to the rest of the flex item siblings when there isn’t enough space for them all to fit as defined by their content, basis, and other CSS properties. Basically, the shrink factor defines how the negative space is distributed, or how flex items should become narrower or shorter, when the flex container parent isn’t allowed to otherwise grow or wrap.

If the sum of the main sizes of all the flex items is greater than the main size of the flex container, then you can specify how much you want to “shrink” the flex items. The amount by which the flex items’ main sizes exceed the container’s main size is the negative space. Using the flex-shrink property, you can distribute this negative space over the flex items. The negative space is distributed in proportion to [flex-basis](https://tympanus.net/codrops/css_reference/flexbox/#section_flex-basis) multiplied by the flex-shrink ratio, where the flex basis is the initial main size of the flex item, before free space is distributed according to the flex factors.

Flex Shrink

/* Tutorial specific CSS */
.container {
  display: flex;
}
.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}
.item.two {
  flex-shrink: 5;
}
/**
 * Demo Styles
 */
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
hr {
  margin: 50px 0;
}
.container {
  margin: 150px auto;
  max-width: 800px;
  padding: 20px;
  background-color: #1779ba;
}
.item {
  background-color: #fff;
  width: 100px;
  height: 100px;
  margin: 1%;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 5em;
  color: #1779ba;
}

Codepen also available

Flex Basis

flex-basis: auto | <'width'>

The **flex-basis** property specifies the flex basis which is the initial main size of a flex item, before free space is distributed according to other flex factors ( flex-shrink and flex-grow) This property determines the size of the content-box unless specified otherwise using box-sizing.

Except for auto, flex-basis is resolved the same way as width in horizontal writing modes: percentage values for the flex-basis property are set relative to the flex container’s inner main size. If the specified flex-basis is auto, the used flex basis is the value of the flex item’s main size property. This can itself be the keyword auto, which sizes the flex item based on its contents.

/* Specify <'width'> */
flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

You can learn more about Flex Basis here.

Shorthand - Flex

The flex property is a shorthand property for setting the flex-grow, flex-shrink, and flex-basis properties. The initial value is 0 1 auto. The flex-grow and flex-shrink properties are optional and can be omitted from the flex declaration.

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

For most purposes, authors should set flex to one of the following values: auto, initial, none, or a positive unitless number. According to MDN

Auto

The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "flex: 1 1 auto".

Initial

This is the default value. The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto".

None

The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to "flex: 0 0 auto".

<positive-number>

The item is given the specified proportion of the free space in the container. This is equivalent to setting "flex: <positive-number> 1 0".

To see the effect of these values, try resizing the flex containers from the example below ( codepen originally forked from MDN):

Flex (Grow, Shrink, Basis)

 * {
  box-sizing: border-box;
}
.flex-container {
  background-color: #d6ecfa;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}
.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1779ba;
  color: white;
  font-family: monospace;
  font-size: 13px;
}
.initial {
  flex: initial;
}
.auto {
  flex: auto;
}
.none {
  flex: none;
}
.four {
  flex: 4;
}
.two {
  flex: 2;
}
.one {
  flex: 1;
}
  

Codepen also available

To be Continued…

Thanks for following along. Next up is Part 4, where we will cover Flexible Box Model.

References

Open Source Your Knowledge: become a Contributor and help others learn. Create New Content

Open Source Your Knowledge, Become a Contributor

Part 3 - Flex Items (Flex Grow, Flex Shrink and Flex Basis)

Flex Grow

Flex Shrink

Flex Basis

Shorthand - Flex

To be Continued…

References

Flexbox and CSS Grid Part. 1

Flexbox and CSS Grid Part. 2

Apprendre le HTML et le CSS en seconde

HTML & CSS