Flexbox in CSS3

Flexbox in CSS3

Flexbox is a layout model that makes it easier to create flexible and responsive layouts. It allows you to distribute space among elements in a container and align them in various ways.

<div class="container">

  <div class="box">Box 1</div>

  <div class="box">Box 2</div>

  <div class="box">Box 3</div>

</div>

css

.container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.box {

  width: 100px;

  height: 100px;

  background-color: blue;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

}

In this example, we have created a container with three boxes inside