Flexbox: Responsiveness made easy.

Note: For this blog we will be using flex and flexbox interchangeably but so is not the case. flexbox is an older draft/version and flex is the new one. Apart from name change there is also a massive performance improvement. The new flex is 2.3 times faster than the old flexbox. To know more click here

What is flexbox?

Flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

How does flexbox work?

Flex orientation

flex has something called a main axis. All flex-items are aligned w.r.t the main axis. The main axis can be horizontal or vertical depending upon the flex-direction direction property.

Flex items are laid out following main axis or the cross axis.

main axis: The main axis is the primary axis of the flex container. Note: It may not be horizontal always it depends on the flex property flex-direction.

cross axis: The axis perpendicular to main axis is the cross axis.

main size: A flex item’s dimension ‘width’ or ‘height’ whichever is the main dimension is the main size.

cross size: A flex item’s dimension ‘width’ or ‘height’ whichever is the cross dimension is the cross size.

main-start|main-end: The start for the flex items. Items start form main-start and go towards main-end.

cross-start|cross-end: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

What browses support flexbox?

Image below shows browser support for flexbox

Browser Support Flexbox

What are the Pros and Cons of flexbox?

Pros:

  • Flex can be laid out in any direction (leftwards, rightwards, downwards,upwards).
  • Flex can have their visual order reversed or rearranged.
  • Items can “flex” their sizes to respond to the available space.
  • Items can be aligned with respect to their container or each other.
  • All items have the same height (which is the height of the biggest item).

Cons:

  • Performance issues (some cross browser bugs are there, list of all bugs can be found here).
  • Little browser support.

Flex Properties:

  • display
  • order
  • flex-direction
  • flex-grow
  • flex-wrap
  • flex-shrink
  • flex-flow
  • flex-basis
  • flex
  • justify-content
  • align-items
  • align-self
  • align-content

Click to go to playground

display
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
order
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
flex-direction
This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
flexbox is a single-direction layout concept.
flex-grow
This defines the ability for a flex item to grow.
It accepts a unit less value that serves as a proportion.
It dictates what amount of the available space inside the flex container the item should take up.
Negative numbers are invalid.
flex-wrap
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
flex-shrink
This defines the ability for a flex item to shrink if necessary.
Negative numbers are invalid.
flex-flow
This is a shorthand flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.
Default is row nowrap
flex-basis
It allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.
flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined.
Default is 0 1 auto.
It is recommended that you use this shorthand property rather than set the individual properties.
justify-content
This defines the alignment along the main axis
flex-start (default): items are packed toward the start line.
flex-end: items are packed toward to end line.
center: items are centered along the line.
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line.
space-around: items are evenly distributed in the line with equal space around them.
align-items
This defines the default behavior for how flex items are laid out along the cross axis.
flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
stretch (default): stretch to fill the container.
align-self
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
All properties work the say way as in align-items.
align-content
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.
flex-start: lines packed to the start of the container
flex-end: lines packed to the end of the container
center: lines packed to the center of the container
space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: lines evenly distributed with equal space around each line
stretch (default): lines stretch to take up the remaining space.
Note: this property has no effect when there is only one line of flex items.

Click here for playground.

This brings us to the end of this blog post. I hope you now have a better understanding of flex.

P.S. Bootstrap 4 is coming out in a while and it using flex underneath.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.