CSS Flex Box

CSS Flexbox is a layout module that provides a more efficient way to lay out, align, and distribute space among items in a container. It's a powerful tool for creating responsive designs that work well on screens of different sizes and orientations.

The Flexbox layout model works by defining a flex container and its child elements as flex items. The container is defined using the display: flex property, and the child elements are positioned along a main axis and a cross axis, based on the properties and values set for the container and the items.

Here's an example of how to create a simple Flexbox layout that aligns items horizontally:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .item {
    background-color: #ccc;
    padding: 10px;
  }

In this example, the container element is set to display: flex, which turns it into a Flexbox container. The justify-content property is set to space-between, which aligns the items with equal space between them. The align-items property is set to center, which centers the items vertically within the container.

Here's another example of a Flexbox layout that aligns items vertically:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .item {
    background-color: #ccc;
    padding: 10px;
  }

In this example, the container element is set to flex-direction: column, which changes the main axis from horizontal to vertical. The justify-content property is set to center, which centers the items horizontally within the container. The align-items property is set to center, which centers the items vertically within the container.

Next Article ❯