CSS Flex box

CSS flex box is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).

CSS Flex box-modules

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

Flex box-container

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area’s container’s display property to flex or inline-flex.

flex-container > div {
  background-color: #F0F8FF;
  margin: 15px;
  padding: 25px;
  font-size: 35px;

Flex box-items

The direct child elements of a flex container automatically becomes flexible (flex) items.

.flex-container > div {
  background-color: AquaBlue;
  color: white;
  width: 200px;
  margin: 50px;
  text-align: center;
  line-height: 85px;
  font-size: 40px;

Flex box-responsive

CSS Flex box-responsive is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes.

@media (max-width: 700px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;