CSS Flex-box in a easy way(Part-1)

Amit Deshwal
2 min readJun 20, 2020

--

Responsive Layout is nowadays necessary and CSS offers some great features to handle it. CSS offers two popular layout modules

  1. Flex-box Layout
  2. Grid Layout

In short flex-box is used for 1-dimensional layout & grid is used for 2-dimensional layout. In this article we will have a look on flex-box layout.

Flex-Box Basics…

By default the div element is set to display:block. If you want to change it to flex layout then you have to set div to display:flex.

Before going further let’s have a look on flex box terminology diagram to understand it better,

Flex Box Terminology Diagram.

Flex Direction

Flex direction tells the browser in which direction we want our flex to flow in, we have the following directions available with flex layout,

  1. flex-direction: row (left to right)
  2. flex-direction: column (top to bottom)
  3. flex-direction: row-reverse (right to left)
  4. flex-direction:column-reverse (bottom to top)

By default the direction is set as row for the flex.

Justify Content

‘justify-content’ is a property used to set align the items in the div(container) along the main-axis(refer the diagram above). The options available with us to align the items using ‘justify-content’ are,

  1. justify-content: center
  2. justify-content: space-around
  3. justify-content: space-between
  4. justify-content: flex-start
  5. justify-content: flex-end
  6. justify-content: space-evenly

By default the is ‘justify-content’ is set as ‘flex-start’.

Align Items

‘align-items’ is a property used to align the items across the cross-axis(refer the diagram above). The options available with us to align the items ‘align-itemsare,

  1. align-items: flex-start
  2. align-items: flex-end
  3. align-items: baseline
  4. align-items: stretch
  5. align-items: center

Now you have understood the basic steps to convert a div to a flex container, let’s take a simple example for better understanding.

<div class="container">
<div>1</div>
<div>2</div>
<div>

Here we have a basic div with class container, let’s convert it to flex container in css.

.container{
display:flex;
justify-content:center;
align-items:center;
}

That’s it, our div has been converted to a flex-box container and all the items are centered inside of div. I don’t know if you noticed or not i haven’t used flex-direction so it is set to ‘row’ by default.

I hope now you have got basic understanding on flex-box, see you in next part in where we will work on more advanced properties of flex.

Happy learning!

--

--