Flexbox is a method of positioning elements in horizontal or vertical stacks while making a layout for a webpage. While struggling with float element to bring the website layout in position, people think of easier ways to do this. Flexbox, in recent time, has been very popular among the frontend developers. Shaping beautiful website layout is now a piece of cake with the advent of Flexbox.

It is a new layout module in CSS3 that improves the items align, order and directions in the container even when they are with dynamic or unknown size. Flexbox has the ability to modify the width and height of its children to adjust the available space on different sizes of screens.

A complete guide to Flexbox

There are plenty of sources where you can learn CSS3 Flexbox from. Both W3schools and CSS-Tricks have free resources for the learners to understand how Flexbox works. Here, we will show you the visual guidelines on CSS3 Flexbox. Let’s see how Flexbox properties affect the layout.

Flex-direction

flex-direction defines how flex items are placed in the flex container by specifying the direction of the flex container’s main axis. Items can be laid out in two directions. Row is for horizontal and column is for vertical alignment.

#Properties

  • row: Items are placed as same as the text direction.
  • row-reverse: Items are placed opposite to the text direction.
  • column: Items are placed top to bottom.
  • column-reverse: Items are placed bottom to top.

Justify-content

justify-content determines how browsers distribute space for items along the main axis of their container. This property aligns the flexible items when the items do not use all space on the main-axis.

#Properties

  • flex-start: Items align to the left side of the container.
  • flex-end: Items align to the right side of the container.
  • center: Items align at the center of the container.
  • space-between: Items display with equal spacing between them.
  • space-around: Items display with equal spacing around them.

Align-items

align-item property aligns flex items along with the cross axis. Just like justify-content but in the perpendicular direction. It sets the default alignment for all available flex items.

#Properties

  • flex-start: Items align to the top of the container.
  • flex-end: Items align to the bottom of the container.
  • center: Items align at the vertical center of the container.
  • baseline: Items display at the baseline of the container.
  • stretch: Items are stretched to fit the container.

Order

order property defines the order of the main items in which children of a flex container appear inside the flex container. Flex items can be reordered with this order property without even restructuring the HTML code.

Align-self

align-self property overrides the default alignment (or the one specified by align-items) for individual flex items.

#Properties

  • flex-start: Items align to the top of the container.
  • flex-end: Items align to the bottom of the container.
  • center: Items align at the vertical center of the container.
  • baseline: Items display at the baseline of the container.
  • stretch: Items are stretched to fit the container.

Flex-wrap

flex-wrap property controls if the flex container lays out its items in single or multiple lines and the direction the new lines are stacked in.

#Properties

  • nowrap: Every item is fit to a single line.
  • wrap: Items wrap around to additional lines.
  • wrap-reverse: Items wrap around to additional lines in reverse.

Flex-flow

flex-flow property is the combination of both flex-direction, flex-wrap. You can use their properties in a single place with flex-flow.

 #main {
    display: flex;
}
#main div {
    flex-flow: <flex-direction> <flex-wrap>;
}

Align-content

align-content property aligns the flex container lines within the flex container when there’s extra space on the cross axis.

#Properties

  • flex-start: Lines are packed at the top of the container.
  • flex-end: Lines are packed at the bottom of the container.
  • center: Lines are packed at the vertical center of the container.
  • space-between: Lines display with equal spacing between them.
  • space-around: Lines display with equal spacing around them.
  • stretch: Lines are stretched to fit the container.

Flex-basis

flex-basis property takes the same values as the width and height and also specifies the initial main size of the flex item, before free space is distributed according to the flex factors.

 #main {
    display: flex;
}
#main div {
    flex-basis: <length>;
}

Flex

flex property is a shorthand for flex-grow, flex-shrink and flex-basis combined. This property determines the flexible length on flexible items. The second and third parameters (flex-shrink and flex-basis) in flex are considered optional. Default is 0 1 auto.

Flex-grow

flex-grow property defines the flex grow factor of a flex item. It specifies amount of space inside the flex container for the item. This property's factor of a flex item is relative to the size of the other items in the flex-container.

Flex-shrink

The flex-shrink determines the flex shrink factor specifying how much the flex item will shrink relative to the rest of the flex items in the flex container.

 #main {
    display: flex;
}
#main div {
   flex-shrink: <number>;
flex-basis: <length>;
}

Flexbox is being widely used by the frontend developers around the world. It provides a more efficient way to lay out, align and distribute space among items, even when their sizes are unknown.