flexbox

Flexbox, or the Flexible Box Layout, is a layout model in CSS that allows you to design complex layout structures with a more efficient and predictable way than traditional models, especially when you want to distribute space and align items in complex layouts and when the size of your items is unknown or dynamic.

Basic Concepts:

Flex Container: The parent element in which display: flex or display: inline-flex is applied. It becomes a flex container and its children become flex items.

Flex Items: Direct children of the flex container. They can be laid out, aligned, and justified in many ways, quickly and with predictable results, even in complex layouts.

Main Properties:

Flex Container Properties:

display: Specifies the type of rendering box. Use flex (renders as a block) or inline-flex (renders as inline).

flex-direction: Defines the direction of the main axis. The values could be row (default), row-reverse, column, and column-reverse.

justify-content: Aligns items on the main axis. Values can be flex-start, flex-end, center, space-between, space-around, etc.

align-items: Aligns items on the cross axis. Values are flex-start, flex-end, center, baseline, and stretch.

flex-wrap: By default, items will try to fit on one line. You can change that with nowrap, wrap, or wrap-reverse.

align-content: Aligns flex lines when there is extra space in the cross-axis. It takes similar values as align-items and justify-content.

Flex Item Properties:

flex-grow: A number that defines how much of the available space inside the flex container the item should take up.

flex-shrink: A number that defines how the item will shrink relative to the rest of the flex items in the container when there is not enough space.

flex-basis: Defines the default size of an element before the remaining space is distributed according to the flex-grow and flex-shrink factors.

flex: A shorthand for flex-grow, flex-shrink, and flex-basis.

align-self: Allows the default alignment to be overridden for individual flex items.

order: By default, flex items are laid out in the source order. However, order property can control the order in which they appear in the flex container.

Example:
css

/* Container */
.flex-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
/* Items */
.flex-item {
 flex-grow: 1;
 flex-basis: auto;
}

Html

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

Usage:

Flexbox is widely used for designing components and complex layout structures, especially when striving for a responsive design. It's a powerful tool and offers solutions to many of the most common problems and tricky parts of CSS layout and beyond.

Browser Support:

Flexbox is widely supported in all modern browsers, so you can use it confidently in your projects.

These resources will assist you to understand and utilize Flexbox in your web projects more efficiently.