How to use flexbox in CSS?

Flexbox is a new layout module in css3 and before css3 we did create table layout, block Layout, inline layout, and positioned layout in CSS. But nowadays we create a flexible layout with direction, spacing, size, alignment, and order.

Flexbox means the main container where available more boxes, flexbox need to set the property of the "display: flex" then you will find all direct child element now flexible as below example:

.flexContainer {

  display: flex;

  border:1px solid #ccc;

  height: 200px;

}

.flexContainer .innerElement  {

  background: #0bf;

  text-align: center;

  font-size: 30px;

  padding: 20px;

  margin: 5px;

  font-size:16px;

  color: #fff;

}

<div class="flexContainer">

  <h1 class="innerElement">flexbox Direct content </h1>

  <div class="innerElement">flexbox Direct content

    <div class="abc">flex example  inner Content</div>

  </div>

  <span class="innerElement">flexbox Direct content flexbox Direct content</span>

  <strong class="innerElement">flexbox Direct content</strong>

</div>

You are seeing that inside of the flexContainer has available more inline element but now at this time, this is flexbox items because this is a direct element. And class abc is not a direct element of the flexContainer so this is only content.

Flexbox have following properties: flex-direction, flex-wrap, justify-content, align-items, align-content, align-self, flex-grow, flex-shrink, flex-basis, order etc.