CSS Flexible Box Layout, commonly known as Flexbox, is a one-dimensional layout model that provides an efficient way to design complex web layouts and distribute space among items in a container. Flexbox is particularly useful for building responsive and dynamic user interfaces.
Key Concepts:
___
Flex Items:
The child elements inside a flex container are the flex items.
By default, flex items are laid out in a row.
Example:
.flex-item { flex: 1; /* Flex shorthand for flex-grow, flex-shrink, and flex-basis */ }
___
Main Axis and Cross Axis:
Flexbox works along two axes: the main axis and the cross axis.
The main axis is defined by the flex-direction property (row, row-reverse, column, column-reverse).
The cross axis is perpendicular to the main axis.
___
Justify Content:
justify-content aligns flex items along the main axis.
Example:
.flex-container { display: flex; justify-content: space-between; }
___
Align Items:
align-items aligns flex items along the cross axis.
Example:
.flex-container { display: flex; align-items: center; }
___
Flex Direction:
flex-direction sets the direction of the main axis.
Example:
.flex-container { display: flex; flex-direction: column; }
___
Example:
Consider a simple navigation bar using Flexbox:
<!DOCTYPE html>
In this example:
The parent container (nav-bar) is a flex container.
The child items (nav-item) are flex items.
justify-content: space-around; evenly spaces the items along the main axis.
___
What’s the difference between a flex container and a flex item?
Difference between a Flex Container and a Flex Item:
Flex Container:
The flex container is the parent element that is set to have display: flex; or display: inline-flex;.
It establishes the flex formatting context and contains the flex items.
Properties like justify-content, align-items, and flex-direction are applied to the flex container.
.flex-container { display: flex; justify-content: center; align-items: center; }
Flex Item:
Flex items are the child elements of the flex container.
They are the elements directly affected by the flex properties, such as flex-grow, flex-shrink, and flex-basis.
Flex items can also be flex containers themselves, creating nested flex structures.
.flex-item { flex: 1; }
___
How do you create a flex item?
To create a flex item, designate an element as a child of a flex container and apply the display: flex; property to the container. The child element automatically becomes a flex item.
Example:
<!DOCTYPE html>
```
In this example, the <div> elements inside the flex-container become flex items automatically, and the properties applied to .flex-item affect the layout within the flex container.