Do You Know the Basics of CSS Flexbox?

To help when creating the flexible layouts, CSS flexbox has the huge ability to calculate total space. In order to use flexbox, we use the property called “flexbox”. “flexbox” is not just a single property, it contains a large set of properties. Some of these properties that are meant to be set on others and their parent children element. When a flexbox property is set on a parent, we call it “flex container”, we also call them “flex items”, when it’s set on its children.

CSS Flexbox Basics!

Flexing container

According to the example below, when defining an element as a flex container will automatically make all the children “flex the items”.

CSS Flexbox

Do You Know the Basics of CSS Flexbox?

A flex container has both main and a cross axis. Both are used for controlling the flex items by using the axis’ properties properly, you can change the direction of the flex container by using the “flex-direction”, for example.

In the given example, you see “row” as a value to the flex-direction property. You could change this to “row-reverse”, “column” or “column-reverse” as this is considered as the standard value.

Flexing all the items

Flexing all items that have their own properties:

  • – Flex-basis
  • – Flex-grow
  • – Flex-shrink

These properties can be used in various ways like a shorthand property, called “flex”. An example is given here on how to use “flex”.

In the example here, the 1 stands for flex-grow, the 0 defines for flex-shrink and the auto directs for the flex-basis.

CSS Flexbox

Do You Know the Basics of CSS Flexbox?

Justifying the content

Whenever the flexing items have still some space left in the flex container and reached their limits and there is some usage of the property called “justify-content”. This property has lesser values that can be used:

  • – Center
  • – Flexing the end
  • – Flexing the start
  • – Spacing around
  • – Spacing in between
  • Now you know the basics.

To know more about CSS Flexbox, keep in touch with https://cssanimation.io. Besides check our blog section daily to know more about CSS and web animation.

Thank you.

For More Resources & Further Study, Check: