What is the need of Flexbox?

Flex-box or Flexible responsive box layout makes many things, handy in CSS. Without using float and positioning, we can easily center the items, add equal spacing between the items, arrange items in rows and columns, irrespective of screen size.

Flex elements

Flex elements include a flex-container (Parent) and flex-items (Child).

Flex-container and its properties

Flex-container can be any HTML element, which has few more divisions or classes of other elements inside it, which are required to be arranged specifically as rows or columns etc.

1. Flex-direction

It specifies the items to be arranged in row-wise or column-wise, within the container.

flex-direction: row aligns the items from left to right. (This is the default property of display: flex)

flex-direction: column aligns the items from top to bottom.

We also have column-reverse and row-reverse that reverses the order of items, stacked in the flex-container.

2. Justify-content

As the name defines, it justifies the content or items of the flex-container horizontally in specified locations like flex-start (left), flex-end (right), center, space-around, space-between and space-evenly.

3. Align-items

It aligns the flex-items of the flex-container vertically in specified locations like flex-start (top), flex-end (bottom), center, stretch, and baseline.

NOTE: Using justify-content: center and align-items: center, we can easily move the contents to the center of our web-page (both horizontally and vertically).

4. Flex-wrap

It wraps all the flex-items within the given width of flex-container

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: grey;
  width:500px;
}

Flex-items and their properties

The direct child elements of a flex container automatically becomes flexible (flex) items.

1. Order

This property enables us to change the order of flex-items. The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

<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 style="order: 0">5</div>
  <div style="order: -1">6</div>
  <div style="order: -2">7</div>
</div>

2. Flex

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 50px">3</div>
  <div>4</div>
</div>

3. Align-self

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-end">2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

.flex-container {
  display: flex;
  align-items: stretch;
  height:300px;
  background-color: grey;
}

Conclusion

Flex-box make things simple. So, knowing how to use flex-box and its properties can be helpful to design and style our website more efficiently.

Thanks for reading :)

Flex-Box in CSS

All the Basics about Flex-Box in CSS

Table of contents