LU04b - Flexbox
CSS Flexbox is a powerful layout model in CSS that was developed to simplify the design of websites and web applications and to enable flexible, dynamic layouts. It provides an efficient way to organise, align and distribute elements within a container element, regardless of their size or order.
Basic concept
The basic concepts of Flexbox include the container element and the items it contains. The Flex container acts as a frame for the Flexbox layout and organises the Flex items within it. These items can be arranged horizontally or vertically, depending on the orientation of the main axis. The main axis defines the direction in which the flex items are arranged in the container, while the cross axis is perpendicular to it and influences the orientation of the items in relation to the main axis. Understanding these basic concepts is crucial for the effective use of Flexbox to create dynamic and flexible layouts in CSS.
Properties of the container
| Property | Description |
|---|---|
| flex-direction | Determines the direction of the main axis. Possible values are: row, row-reverse, column, column-reverse. |
| flex-wrap | Controls whether the items remain in a single line or are wrapped into multiple lines if required. Possible values are: nowrap, wrap, wrap-reverse. |
| justify-content | Defines the alignment of the items along the main axis. This influences how excess space is distributed on the main axis. |
| align-items | Defines the alignment of the items along the cross axis if they do not take up all the available space on the main axis. |
| align-content | Controls the alignment and distribution of multiple rows of items along the cross axis. |
Properties of the item
| Property | Description |
|---|---|
| order | Changes the order of the items within the flex container. Items with a lower order are displayed first. |
| flex-grow | Defines how much additional space a flex item can take up along the main axis in relation to other flex items. |
| flex-shrink | Defines how much a flex item can shrink to fit the available space in relation to other flex items. |
| flex-base | Defines the preferred initial size of a flex item along the main axis before additional space is allocated. |
| flex | A shortened notation for flex-grow, flex-shrink and flex-basis in one value. |
| align-self | Overrides the alignment settings of the flex container for a single flex item. |