Thursday, June 29, 2017

Learning to use Flexbox

Flexbox is a ‘new’ way to layout your html page in CSS. No longer you need to use things like floats and positioning for creating CSS layouts. Instead you get a more flexible approach that scales from smartphone to smarttv. Browsers start to pick up this technique, so it’s time that you start learning it.

From MDN:

When elements are laid out as flexible boxes, they are laid out along two axes:

  • The main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
  • The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the cross start and cross end.
  • The parent element that has display: flex set on it (the <section> in our example) is called the flex container.
  • The items being laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example).

flex_terms.png

A great example that helps you understand the different settings of a Flexbox layout is the Build With React has a great flexbox editor.

clip_image001

Another one that I personaly liked(childhood memories) is a game called Flexbox Froggy. It teaches the concepts in an enjoyable and accessible manner.

clip_image003

Remark: Know that you can combine Flexbox with other layouting techniques that you used before.

1 comment:

ReactJS Online Training in Hyderabad said...

This article is amazing. I have found this to be very informative. I’m looking forward to read more of your work.

Best Regards,
CourseIng - ReactJS Training in Hyderabad