A Complete Introduction to Flexbox for Beginners

What is flexbox ?

Flexbox is a css layout model that helps us in organize laoyuts in an efficient and flexible way. It arrange items within a container based on the available space and layout needs.

Setup :

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

.container {
    display: flex;
}

When we apply display: flex to a parent element then parent element becomes a flex and all direct children of that container becomes flex items.

Main axis and cross axis

Flexbox items are laid out along a main axis and cross axis. The orientation of these items are depends on flex-direction property.

If flex-direction : row ;is set, That is the default setting, where the main axis is horizontal and the cross axis is vertical.

If flex-direction: column; is set, then the main axis is vertical and the cross axis is horizontal.

flex-direction : row-reverse; this property reverses the direction of the main axis (from right to left) and, consequently, reverses the visual order of the flex items within the row.

flex-direction: column-reverse; This property reverses the direction of the cross axis (from top to bottom) and, as a result, reverses the visual order of the flex items within the column.

Alignment in flexbox

Flexbox gives us two alignment tools to align items along the main axis and cross axis.

1. justify-content

This property controls alignment along the main axis.

• justify-content: flex-start; align items at the start of the main axis.

• justifiy-content : flex-end ; align items at the end of the main axis.

• justify-content: center; centers all the items along the main axis.

• justify-content: space-between; distributes the items evenly along the main axis. The first item is placed at the start of the main axis, and the last item is placed at the end. The remaining space is distributed equally between the items.

• justify-content: space-around; distributes items evenly along the main axis with equal space around each item.

• justify-content: space-evenly; distributes items so that the space between any two adjacent items, as well as the space before the first item and after the last item, is exactly the same . This creates a visually balanced distribution.

2.align-items

This property controls alignment along the cross axis

• align-items : stretch ; this is the default behavior. Flex items are stretched to fill the container along the cross axis (still respect min-width/max-width).

• align-items: flex-start; aligns flex items to the start of the cross axis.

• align-items: flex-end; aligns flex items to the end of the cross axis.

• align-items: center; centers flex items along the cross axis.

• align-items: baseline; Align items so that their baselines (the imaginary line where text sits) line up. This is especially helpful when you have items with different font sizes or text content.

Align self ( align-self )

Unlike justify-content and align-items, which are applied to the flex container, align-self is applied to an individual child (flex item). It allows us to override the container’s cross-axis alignment for a specific item. align-self has the same values as align-items. In fact, they adjust the same property.

.item2 : {
    align-self : auto | flex-start | flex-end | center | baseline | stretch ;
}

Order

The order property in Flexbox is used to change the visual order of flex items without altering the HTML structure.

.container {
  display: flex;
}

.item1 {
  order: 2;
}

.item2 {
  order: 3;
}

.item3 {
  order: 1;
}

Flex-wrap (flex-wrap)

The flex-wrap property decides if flex items should wrap onto multiple lines or stay in a single line within the flex container. By default, the flex-wrap property is set to nowrap. This means that if there's not enough space in the container, the items will overflow.

The flex-wrap:wrap property allows items to wrap onto multiple lines from top to bottom.

The flex-wrap: wrap-reverse property allows items to wrap onto multiple lines from bottom to top.

.container {
  display: flex;
  flex-wrap: wrap | nowrap | wrap- reverse;
}

Flex-grow

flex-grow is a useful Flexbox property that lets a flex item expand to fill any available space within its flex container along the main axis.

.flex-container {
    display: flex;
}
.item3 {
    flex-grow: 1;
}

Flex-shrink (flex-shrink)

flex-shrink is the opposite of flex-grow in CSS Flexbox. While flex-grow lets items expand to fill available space, flex-shrink controls how flex items will reduce in size when there isn't enough space in the flex container along the main axis.

flex-shrink: 0: The item will not shrink at all. It will keep its original size along the main axis, even if this causes the content to overflow the flex container. flex-shrink: 1: By default, flex items will shrink if needed to fit within the container. Higher values mean the item will shrink more than others.

.flex-container {
    display: flex;
}
.item2 {
    flex-shrink: 2;
}

Gap

Gap allows us to create space between container children.

gap: <value>; sets both the column gap and row gap to the same value.

gap: <row-gap-value> <column-gap-value>; sets the row-gap and column-gap separately.

There are also two properties we can use individually:

• row-gap: This sets the gap between rows.

• column-gap: This sets the gap between columns.

Flexbasis

flex-basis is an important property in CSS Flexbox that determines the initial size of a flex item along the main axis, before any flex-grow or flex-shrink changes are applied. If flex-basis is set, it takes precedence over width or height (depending on the flex-direction).

Flex

It's a shorthand property that combines three of the individual flex item properties we just discussed: flex-grow, flex-shrink, and flex-basis. Applying flex to an item is a concise and very common way to control its sizing and flexibility within a flex container.

 /* flex: <flex-grow> <flex-shrink> <flex-basis>; */

.item2 {
  flex: 1 0 100px;
}

Flexbox is all about flexible thinking. Keep experimenting with its properties, especially the flex shorthand, as it provides great control over item sizing. Next, try exploring align-content for aligning multiple lines, or see how order can rearrange items without changing your HTML.