CSS — Part-9- Flexbox

8 min readJul 31, 2022

The Flexible Box Module is a one-dimensional layout module. It is called one-dimensional because, at a time, a flexbox deals with one dimension either as a row or as a column.

It gives the ability to the container to alter its item’s width or height to fill the available space in the best possible way. It aims at providing an efficient way to lay out items in a container even when their size is unknown (thus the word ‘flex’).

Basics and Terminology

Some properties need to beset on the container and some on the children.

2 axes need to bekept in mind when working with flexbox — the main axis and the cross axis.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The main axis is the primary axis along which the items are laid out starting from the main-start and going to the main-end.
The main axis is determined by the flex-direction and the cross axis runs perpendicular to it.
flex-direction can take 4 possible values — row, row-reverse, column, and column-reverse.
For row or row-reverse, the main axis runs along the inline-direction(horizontal)
For column or column-reverse, the main axis runs along the block-direction (vertical)
For a flex-direction set to either row or row-reverse —

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

For a flex-direction set to either column or column reverse —

The Flex container

An area of a document laid out using a flexbox is called a flex container.

To create a flex container, we set the display of that element as either flex or inline-flex.

The direct children or a flex container becomes the flex items.
As the default direction of flex is row, the items inside the container will appear in a row.
These items don’t stretch n the main axis but can stretch on the cross axis to fill the size of the cross axis.

The properties of a flex container can be:-

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

The flex-direction Property

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

The flex-wrap Property

The initial value of the flex-wrap property is nowrap. This means that if there is not enough space in the container the items will overflow.

flex-wrap: wrap

flex-wrap: nowrap

flex-wrap: wrap-reverse

The flex-flow shorthand

You can set the flex-direction and flex-wrap properties using the shorthand flex-flow.

.container {
  display: flex;
  flex-flow: column wrap;
}

The justify-content Property

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

Values: flex-start, flex-end, start, end, left, right, center, space-between, space-around, space-evenly
Default value : flex-start

flex-start: items are packed toward the start of the flex-direction.

2. flex-end: items are packed toward the end of the flex-direction.

3. start: items are packed toward the start of the writing-mode direction.

4. end: items are packed toward the end of the writing-mode direction.

5. center: items are centered along the line

6. space-between: items are evenly distributed in the line.

7. space-around: items are evenly distributed in the line with equal space on both sides.

8. space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

The align-items Property

This defines the default behavior for how flex items are laid out along the cross axis on the current line.

Values: stretch, flex-start/start/self-start, flex-end/end/self-end, center, baseline.
Default Value: stretch

stretch: stretch to fill the container.

2. flex-start / start / self-start: items are placed at the start of the cross axis.

3. flex-end / end / self-end: items are placed at the end of the cross axis.

4. center: items are centered in the cross-axis

5. baseline: items are aligned such as their baselines align

The align-content Property

This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

values — normal, flex-start/ start, flex-end/ end, center, space-between, space-around, space-evenly, stretch
default value — normal

normal (default): items are packed in their default position as if no value was set.

2. flex-start / start: items packed to the start of the container

3. flex-end / end: items packed to the end of the container.

4. center: items centered in the container

5. space-between: items evenly distributed from the start line to the end line

6. space-around: items evenly distributed with equal space around each line

7. space-evenly: items are evenly distributed with equal space around them

8. stretch: lines stretch to take up the remaining space

The gap property

The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.

gap, row-gap, column-gap

gap: 10px : — row gap : 10px, column-gap : 10px

2. row-gap: 30px

3. column-gap: 30px

Flex Items

The flex item properties are:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

The order Property

By default, flex items are laid out in the source order.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Available Space

If we have three 100 pixel-wide items in a container that is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

The properties like flex-basis, flex-grow, and flex-shrink help distribute the leftover space between the items.

The flex-grow Property

the ability for a flex item to grow if necessary
Negative numbers are invalid.
This will cause the item to stretch and take up any available space on that axis

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

The flex-shrink Property

This defines the ability of a flex item to shrink if necessary.
Negative numbers are invalid.
Where the flex-grow property deals with adding space on the main axis, the flex-shrink property controls how it is taken away.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

The flex-basis Property

specifies the initial length of a flex item.
initial value: auto — if the items have a specified size, it is considered as a flex-basis else the content’s size.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>

The flex Property

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

The third flex item is not growable (0), not shrinkable (0), and with an initial length of 200 pixels

The align-self Property

The align-self property overrides the default alignment set by the container's align-items property.

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Perfect Centering: combining justify-content and align-items

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Controlling space inside flex items

Assume that the container has more space than the items need. The items do not grow to fill up the space on the main axis as the default flex properties are set to:-

flex-grow: 0: items do not grow.
flex-shrink: 1: items can shrink smaller than their flex-basis.
flex-basis: auto: items have a base size of the auto.

Sources: -

https://web.dev/learn/css/flexbox/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox