Flexbox

Flexbox is like LEGO blocks.

Just as you can build your desired shape with LEGO blocks, Flexbox allows you to stack web page elements to create web designs as you want.

In the past, arranging content horizontally, vertically, or centrally required complex CSS rules. However, with Flexbox, you can align elements simply.

Copy
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

In Flexbox, the box that wraps around elements is called the Flex Container, and the elements inside this box are referred to as Flex Items.

• Flex Container: The parent element that applies the Flexbox layout, and the child elements within it are called Flex Items.

• Flex Item: Each element inside the Flex Container that is aligned or arranged according to the properties of the Container.

Copy
.container {
  display: flex;
}

By adding the display: flex; property to CSS as shown above, the element becomes a Flex Container, and all child elements within it automatically become Flex Items.

The following are the properties commonly used when working with Flexbox.

A property that defines the Flex Container, applying the flex property makes the child elements within the container Flex Items.

Copy
.container {
  display: flex;
}

Defines the direction in which Flex Items are arranged.

Setting it to row arranges items horizontally, while column arranges them vertically.

Copy
.container {
  flex-direction: row; /* or column */
}

Defines whether Flex Items within a Flex Container should be arranged in a single line or wrapped onto multiple lines if necessary.

Setting flex-wrap: nowrap; arranges Flex Items in a single line, while flex-wrap: wrap; wraps items onto a new line if they exceed the parent's width.

Copy
.container {
  flex-wrap: nowrap; /* arrange flex items in a single line */
}

Below is a simple implementation of a Flexbox layout.

Copy
<div class="flex-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Copy
.flex-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.box {
  padding: 30px;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  background-color: #c8e6c9;
  border-radius: 5px;
}

Follow the highlighted parts of the code and enter them.