Flex

Flex is a powerful layout system for creating web page designs that allows the elements within a container to be arranged dynamically according to their available space. It is a part of the CSS3 specification, and it provides developers with a simple and efficient way to achieve responsive design without relying on external frameworks or plugins.

Purpose

The purpose of flex is to provide a simple and efficient way to create responsive layouts for web pages. In the past, developers had to rely on float-based layouts or grid systems to achieve this goal. However, these approaches are often complex and difficult to manage, especially when dealing with complex layouts or multiple screen sizes.

Flex solves these problems by providing a powerful and flexible system for arranging elements within a container. It allows developers to define the layout of their page using a simple set of CSS properties, and it automatically adjusts the positioning and sizing of the elements based on the available space.

Usage

The basic usage of flex involves defining a container element and then specifying how its child elements should be arranged within it. This is done using a series of CSS properties that control the layout, alignment, and sizing of the elements.

Container Properties

The first step in using flex is to define a container element that will hold the child elements. This is done using the display property, which is set to flex:

.container {
  display: flex;
}

Once the container has been defined as a flex container, it will automatically arrange its child elements horizontally, with each element taking up an equal amount of space.

To change the direction of the layout, the flex-direction property can be used:

.container {
  display: flex;
  flex-direction: row-reverse;
}

This will cause the child elements to be arranged horizontally, but in reverse order.

To stack the child elements vertically, the flex-direction property can be set to column:

.container {
  display: flex;
  flex-direction: column;
}

This will cause the child elements to be arranged vertically, with each element taking up an equal amount of space.

Child Properties

Once the container has been defined, the child elements can be arranged within it using a variety of properties. These properties control the sizing, alignment, and positioning of the elements.

flex-grow

The flex-grow property controls how much space the element should take up within the container. It is a unitless value that represents a proportion of the available space. For example, if two child elements have flex-grow values of 1 and 2, the second element will take up twice as much space as the first.

.item {
  flex-grow: 1;
}

flex-shrink

The flex-shrink property controls how much the element should shrink if there is not enough space available to accommodate all of the child elements. It is also a unitless value that represents a proportion of the available space. If a child element has a flex-shrink value of 0, it will not shrink at all.

.item {
  flex-shrink: 0;
}

flex-basis

The flex-basis property controls the initial size of the element before any remaining space is distributed among the child elements. It can be set to a specific value, such as 100px, or a relative value, such as auto.

.item {
  flex-basis: 100px;
}

flex

The flex property is a shorthand property that combines the flex-grow, flex-shrink, and flex-basis properties into a single declaration. For example:

.item {
  flex: 1 0 100px;
}

This is equivalent to:

.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100px;
}

align-self

The align-self property controls the alignment of the element within the container along the cross-axis. It can be set to auto, flex-start, flex-end, center, baseline, or stretch.

.item {
  align-self: center;
}

order

The order property controls the order in which the child elements are displayed within the container. It is a unitless value that represents the order in which the elements should appear. By default, all elements have an order value of 0.

.item {
  order: 1;
}

Example

Here is an example of a simple flex layout:

<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: row;
}

.item {
  flex: 1 0 auto;
}

In this example, the container is defined as a flex container with a horizontal layout. The child elements are each defined with a flex value of 1 0 auto, which means they will each take up an equal amount of space within the container.