Learning Flexbox through free Scrimba Course

Introduction

The most important concepts you need to understand about Flexbox is the Flex Container and Flex Items.

https://scrimba.com/g/gflexbox

Main Axis and cross Axis

Flexbox container always have direction and by default the direction is from horizontal (left to right). We can change this direction behavior by specifying the CSS property of flex-direction to column if we want to layout the elements inside the Flexbox container from top to bottom.

See https://scrimba.com/p/pL65cJ/cz94MT8.

Justify Content

By default the flexbox container will layout the elements at the start (or left aligned). We can change this behavior by specifying the justify-content to either flex-start, flex-end, center, space-around, space-evenly, or space-between.

I got questions related to this course module:

  • Is it possible to combine the justify-content values for example combining the flex-start with space-around?

The Flex Property

By default the elements inside the flexbox container will have the width fit with the content inside of the element (text or another element). If we want to set the elements to have equal width, set the value of flex to 1 or any other value greater than 1 it will still set the equal width to the elements.

https://scrimba.com/p/pL65cJ/cGNKJTv

Align Items

Aligning items vertically can be done using the align-items property. If we combined the align-items: center and justify-content: center then we can layout the elements vertically and horizontally relative to the container.

Screenshot from 2018-07-05 22-19-58

Note the the align-items should set in the container.

If we want to align one element inside the container, then we can use align-self property in the element to do that.

https://scrimba.com/p/pL65cJ/cJqymH9

Flex Wrap

By default Flexbox won’t allow the elements inside the container to be wrapped. If we want to push down elements inside the container when the parent width no longer has enough space, set the value of flex-wrap to wrap.

https://scrimba.com/p/pL65cJ/cJqk7fW

Grow Shrink Basis

The flex: 1 is actually a shorthand of the following rules:

  • flex: 1 1 0
  • flex-grow: 1; flex-shrink: 1; flex-basis: 0;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s