The Basics of Flex-Box In CSS

Understand what flexbox is, and its basic properties

Photo by Pankaj Patel on Unsplash

Flexible Box Module or flexbox was introduced in 2009 as a new layout system. Before the flexbox, there were four layout models: block, inline, table, positioned.

Flexbox was designed as a one dimensional layout model, i.e. it deals with layout one dimension at a time, i.e. either as a row or as a column, and it is easy to use and very effective.

TABLE OF CONTENT
· Using Flexbox
  ∘ Making a flex container
  ∘ Flex-direction
· Two Axes of Flex
  ∘ Main axis
  ∘ Cross axis
· Flex Wrap
· Takeaway

Using Flexbox

To use a flexbox in your layout, you first need a flex container. It is nothing fancy, just an element that will surround all the items you wish to style. It can be a div, section, main, body, header, and even a p element.

I don’t see why p would be a flex unless you have many span elements inside the paragraph which you want to style.

Assuming you are John Snow of the flex box and don’t know how to use it, just follow these steps.

Making a flex container

In our layout, we have four very similar div elements, and we want to style them using a flex container. Maybe you want…