5. CSS Flex Elements

CSS Flex Elements

Introduction to CSS Flexbox

CSS Flexbox, or Flexible Box Layout, is a CSS module that provides a more efficient way to layout, align and distribute space among items in a container, even when their size is unknown or dynamic. It's a model that allows you to control the alignment of elements in a simple and clean way.

The main idea behind Flexbox is to give the container the ability to alter its items' width/height (and order) to best fill the available space. Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Display Flex

The display: flex property in CSS is used to create a flex container. Items within a flex container can be laid out in any direction and can have flexible dimensions to adapt to the display space. This means the flex items can be put next to each other in a row (horizontally) or stacked on top of each other in a column (vertically).

Key Points:

• Applying display: flex to a container makes it a flex container and its child elements flex items.

• The flex items will be displayed in a row by default, but this can be changed using the flex-direction property.

• The space distribution among the flex items can be controlled with properties like justify-content, align-items, and align-content.

Example:

.container {
    display: flex;
}

.item {
    /* Flex item properties */
}

The Flex-direction Property

The flex-direction property is used to define the main axis of the container and the direction in which the flex items are placed in the flex container. Its default value is row, but it can also be set as row-reverse, column, and column-reverse.

Example:

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

The Justify-content Property

The justify-content property is used to align the flex items along the main axis of the flex container. It can take values such as flex-start, flex-end, center, space-between, space-around, and space-evenly.

Example:

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

The Align-items Property

The align-items property is used to align the flex items along the cross axis of the flex container. It can take values such as flex-start, flex-end, center, baseline, and stretch.

Example:

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

The Align-content Property

The align-content property is used to align the flex lines within the flex container when there is extra space in the cross-axis. It can take values such as flex-start, flex-end, center, space-between, space-around, and stretch.

Example:

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

In conclusion, CSS Flexbox is a powerful tool for creating responsive layouts in a clean and efficient way. By understanding the above properties and how they interact, you can create a wide variety of layouts with CSS Flexbox.

Reference

The content in this document is based on the original notes provided in Azerbaijani. For further details, you can refer to the original document using the following link:

Original Note - Azerbaijani Version