CSS - Flexbox

What is Flexbox?

Flexbox, short for Flexible Box Layout, is a CSS layout model that provides a way to design flexible and responsive layouts. It offers properties and tools to arrange, align, and distribute space among items within a container, making it simpler to create complex layouts without using floats or positioning tricks.

One of the main advantages of Flexbox is its ability to adapt to different screen sizes and devices. With Flexbox, you can create layouts that automatically adjust and resize based on the available space, making your website or application look great on desktops, tablets, and mobile phones.

Flexbox introduces the concept of flex containers and flex items. A flex container is the parent element that holds the flex items, while flex items are the child elements inside the container. By applying Flexbox properties to the flex container, you can control how the flex items are laid out and behave within the container.

.container {
    display: flex;
}

By setting the display property of the container to flex, you enable Flexbox layout within the container.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

The justify-content property controls the alignment of flex items along the main axis, while the align-items property aligns items along the cross axis.

.item1 {
    flex: 1;
}

.item2 {
    flex: 2;
}

The flex property allows flex items to grow and shrink based on the available space. The value 1 means the item will take up a proportionate amount of available space, 2 will take double.

Flex Container and Flex Items

In Flexbox, the flex container is the parent element that holds the flex items. It is the element to which you apply the display: flex property to enable the Flexbox layout. The flex container becomes the parent context for its flex items, and the Flexbox properties are applied to the container to control the layout of its child elements.

Flex items are the child elements inside a flex container. They are the elements that are laid out and styled using the Flexbox properties. Flex items can be any type of element, such as <div>, <p>, <img>, or any other HTML element. They automatically become flex items when their parent container is set to display: flex.

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

In the example above, the <div> with the class container is the flex container, and the <div> elements with the class item are the flex items.

Flex Direction

The flex-direction property sets the main axis and the direction in which the flex items are laid out within the flex container. It specifies whether the flex items should be arranged in a row or a column, and in which order.

The possible values for flex-direction are:

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

By default, the flex-direction is set to row, which means the flex items will be arranged in a horizontal row from left to right.

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

Setting flex-direction to column will arrange the flex items vertically from top to bottom.

The flex-direction property plays a key role in determining the main axis of the flex container and how the flex items are positioned along that axis.

Justify Content

The justify-content property aligns flex items on the main axis of the flex container. It sets how the space is shared between and around the flex items. The possible values for justify-content are:

.container {
    display: flex;
    justify-content: center;
}

In this example, the flex items will be centered on the main axis of the container.

Align Items

The align-items property aligns flex items on the cross axis of the flex container. It sets how the flex items are positioned vertically within the container. The possible values for align-items are:

.container {
    display: flex;
    align-items: center;
}

In this example, the flex items will be vertically centered within the container.

Flex Wrap

The flex-wrap property sets if the flex items should wrap onto multiple lines if there is not enough space in the flex container. By default, flex items will try to fit on a single line, but you can change this behavior using flex-wrap. The possible values are:

.container {
    display: flex;
    flex-wrap: wrap;
}

With flex-wrap set to wrap, the flex items will wrap onto multiple lines if there is not enough space in the container.

Flex Grow and Flex Shrink

The flex-grow and flex-shrink properties set how flex items grow or shrink relative to other items when there is extra or not enough space in the flex container.

The flex-grow property sets how much a flex item can grow if there is extra space available. It takes a non-negative number as a value, and the default value is 0. A higher value means the item will grow more compared to other items.

The flex-shrink property sets how much a flex item can shrink if there is not enough space in the container. It also takes a non-negative number as a value, and the default value is 1. A higher value means the item will shrink more compared to other items.

.item1 {
    flex-grow: 1;
    flex-shrink: 1;
}

.item2 {
    flex-grow: 2;
    flex-shrink: 2;
}

In this example, item1 will grow and shrink at a normal rate, while item2 will grow and shrink twice as much as item1.

These Flexbox properties let you control the alignment, wrapping, and sizing of flex items within a flex container, allowing you to create flexible and responsive layouts.

Align Self

The align-self property lets you override the align-items value for flex items within a flex container. It gives you control over the alignment of a single flex item on the cross axis, without changing the alignment of the other items.

The possible values for align-self are:

.container {
    display: flex;
    align-items: flex-start;
}

.item2 {
    align-self: center;
}

The flex container has align-items set to flex-start, which aligns all flex items at the start of the cross axis. However, item2 has align-self set to center, which overrides the container's alignment and centers item2 on the cross axis.

Align Content

The align-content property aligns flex lines within a flex container when there is extra space on the cross axis. It only takes effect when there are multiple lines of flex items, which happens when flex-wrap is set to wrap or wrap-reverse.

The possible values for align-content are:

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

The flex container has flex-wrap set to wrap, allowing flex items to wrap onto multiple lines. The align-content property is set to space-between, which distributes the flex lines evenly along the cross axis, with equal space between them.

These alignment properties, align-self and align-content, give you control over the positioning of flex items and the distribution of flex lines within a flex container.

Order

The order property lets you change the visual order of flex items in a flex container without changing their order in the HTML code. By default, flex items are shown in the same order as they appear in the source code.

The order property accepts integer values, and the default value is 0. Flex items with a higher order value will be placed after items with a lower order value.

<div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
</div>

.item1 {
    order: 2;
}

.item2 {
    order: 3;
}

.item3 {
    order: 1;
}

The visual order of the flex items will be: Item 3, Item 1, Item 2.

This is useful when you want to rearrange the layout of flex items without changing the HTML structure.

Flex Basis

The flex-basis property sets the initial size of a flex item before any remaining space in the flex container is distributed among the items. It defines the default size of an item along the main axis.

The flex-basis property can accept a length value (e.g., pixels, ems, percentages) or one of the keywords auto or content. The default value is auto.

• When set to a length value, the flex item will have an initial size equal to that value.
• When set to auto, the flex item's initial size will be based on its content size.
• When set to content, the flex item's initial size will be based on its content size, but with some extra space-distribution rules.

.item1 {
    flex-basis: 200px;
}

.item2 {
    flex-basis: 50%;
}

.item3 {
    flex-basis: auto;
}

In this example:

The flex-basis property is part of the flex shorthand property, which combines flex-grow, flex-shrink, and flex-basis.

.item {
    flex: 1 1 200px;
}

This sets flex-grow to 1, flex-shrink to 1, and flex-basis to 200 pixels for the flex item.

By using the order and flex-basis properties, you have control over the visual order and initial sizing of flex items in a flex container, allowing for more flexible and dynamic layouts.