Get started with Flexbox.
Tags: css, html, webdev
Published: 2020-12-04 04:37:49

# What is Flexbox?

Flexbox is a layout in CSS3. Flexbox is used to make responsive layouts and components on a webpage. Using is a good choice to use in CSS so you can design the page responsively. Here is a basic guide to getting starting with flexbox.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fsln7je4ax7ft3er28hh.png)

Consider the above image and try to understand a layout there is one container, and inside that two elements are placed. This is an important part to understand, then using flexbox will be easy. Now plot that container into an x-y axis coordinate, horizontal part in flexbox called the Main axis and vertical part is called the Cross axis. 

# Using Flexbox

Give property of ``display: flex;`` to element for using flexbox.

#### Flex-direction
Flex-direction property is used to give direction to element should be placed, four types of properties are defined.

  - `` flex-direction: row; `` place flex-items in row (horizontal).
  -  `` flex-direction: row-reverse; `` place flex-items in row but in reverse order.
  -  `` flex-direction: column; `` place flex-items in column (vertical).
  -  `` flex-direction: column-reverse; `` place flex-items in column but in reverse order.

You can see in the example below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4jkkaafn2ef4osrtmhyg.png)

#### Flex-wrap
Flex-wrap property is used for wrapping flex-items inside the flex-container.

  - `` flex-wrap : nowrap `` will not wrap flex-item in flex-container.
  - `` flex-wrap : wrap `` will wrap flex-item in flex-container if it not fit in container size.

You can see in the example below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/krxb50fi5gp2h4xi6fbj.png)

### Justifying and aligning flex-item

Now, this is a very important property of flexbox and you will use it regularly.
Whenever we want to align flex-item to the Main axis (horizontally) use ``justify-content``, and if you want to align flex-items  to the Cross axis (vertically) use 
`` align-items ``. Now let's see in detail.

#### Justifying content along with the Main axis (Horizontally).

- `` justify-content: flex-start `` will place flex-item to the start of flex-container _(refer the first image above)_
- `` justify-content: flex-end `` will place flex-item to the end of flex-container
- `` justify-content: center `` to center flex-items.
- `` justify-content: space-around ```  space up around item.
- `` justify-content: space-between `` uses the whole frame and space item between.
- `` justify-content: space-evenly `` space all item evenly

#### Aligning content along with the Cross axis (vertically).

All properties are the same as  `` justify-content ``.

- `` align-items: flex-start `` will place flex-item to the start of flex-container _(refer the first image above)_
- `` align-items: flex-end `` will place flex-item to the end of flex-containers
- `` align-items: center `` to center flex-items.
- `` align-items: baseline `` place flex-item to base item.


_Tip: Flexbox is a good option for centering things in CSS. Make sure whatever element you want to center their parent element would have width and height defined and give parent element `` justify-content: center `` and `` align-items: center ``._

Thanks for reading.