Flex Box

It is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the fundamentals.

1. The Flex Container

The flex container is the parent element that contains the flex items. It has various properties that allow designers to define the layout's direction, spacing, alignment, and order. The flex container can be set to either row or column layout, and it can also be set to wrap the flex items to a new line.

2. The Flex Items

The flex items are the child elements contained within the flex container. They can be sized and positioned in many ways, allowing for the creation of complex and dynamic layouts. The flex items can also be aligned both vertically and horizontally within the flex container.

3. Flexbox Properties

Flexbox provides a range of properties that control the layout of the flex container and the flex items. Some of the most commonly used properties include:

flex-direction: sets the direction of the main axis of the flex container
justify-content: aligns the flex items along the main axis
align-items: aligns the flex items along the cross axis
flex-wrap: controls whether the flex items should be wrapped or not
order: controls the order of the flex items

4. Benefits of Flexbox

Using flexbox offers several benefits, including:

Improved control over the layout of the elements on a page, making it easier to create visually appealing and functional designs
More straightforward and cleaner layout methods, with a set of simple rules that can be easily understood and implemented
Flexibility to create responsive layouts that work on different screen sizes and devices
An intuitive and flexible approach that makes it easier for both beginners and experienced designers to create layouts.

Example

Certainly! Here is an example of using CSS flexbox to create a simple layout with a header, two columns, and a footer:

HTML:

<div class="container">
  <header>
    <h1>My Website</h1>
  </header>
  <div class="content">
    <div class="column left">
      <p>This is the left column.</p>
    </div>
    <div class="column right">
      <p>This is the right column.</p>
    </div>
  </div>
  <footer>
    <p>&copy; 2023 My Website</p>
  </footer>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.content {
  flex: 1;
  display: flex;
}

.column {
  flex: 1;
  padding: 1rem;
}

.left {
  background-color: #eee;
}

.right {
  background-color: #ddd;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

This example uses the following flexbox properties:

display: flex: This sets the container element to a flex container.
flex-direction: column: This sets the main axis to be vertical, so that the header, content, and footer elements are stacked on top of each other.
flex: 1: This sets the flex-grow property to 1, which means that the content element will take up all available space in the container.
padding: This adds some padding to the columns to give them some space.
background-color: This sets the background color of the header, columns, and footer.

In conclusion, CSS flexbox is a powerful and versatile layout module that provides designers with the flexibility and control needed to create dynamic and responsive layouts. With its range of properties and simple rules, flexbox offers a straightforward and intuitive way to create visually appealing and functional designs that work on different screen sizes and devices.

Raviraj Bujawade's Blog