Master CSS Flexbox: Align and Distribute Items

Introduction

Flexbox is a layout model to arrange items efficiently within a container. It helps us to make dynamic and responsive layout in webpages.

Basic Terminologies

Main Axis

The main axis is the primary axis where the elements default set-up after applying flex.

Cross Axis

The perpendicular of the main axis is known as cross axis. Its direction depends upon the main axis.

Flexbox Properties

display

After applying the display in the code, the flex box properties will be activated and all the items will shift into main axis.

.container{
    display : flex;
}

flex-direction

This property changes the direction of the flex but its always in the main axis.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

justify-content

It helps to create and maintain layout along main axis:

flex-start :

It aligns all the elements at starting of the flex on main axis.

.container {
  justify-content: flex-start;
}

flex-end :

It adjusts all the elements at the end of the flex on main axis.

.container {
  justify-content: flex-end;
}

center :

It adjusts all the elements in center on main axis.

.container {
  justify-content: center;
}

space-between :

It creates equal space between all the elements on main axis.

.container {
  justify-content: space-between;
}

space-around :

It creates space around all the elements on main axis.

.container {
  justify-content: space-around;
}

space-evenly :

It creates even space in between all the element on main axis.

.container {
  justify-content: space-evenly;
}

Align Items

flex-start :

It adjusts all the items at start point on cross axis.

.container {
  align-items: flex-start;
}

flex-end :

It adjusts all the items at end on the cross axis.

.container {
  align-items: flex-end;
}

center :

It adjusts all the items in the center on the cross axis.

.container {
  align-items: center;
}

stretch :

It stretches items to fill the cross axis.

.container {
  align-items: stretch;
}

baseline :

It aligns items on their baselines on the cross axis.

.container {
  align-items: baseline;
}

gap, row-gap, column-gap :

This is used to create gap between two elements. You can use row-gap or column-gap to be more oriented.

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Conclusion

In this above article we have studied about CSS Flex Box. We also see how flexbox works on main axis and cross axis. We talked about some flex properties like justify-content, align-items and gap.

Understanding CSS Flexbox : Aligning & Distributing Items Easily

Table of contents