Flexbox is a layout mode in CSS that provides an easy and efficient way to arrange items within a container. It allows you to create flexible and responsive layouts that adapt to different screen sizes and devices. Flexbox is widely supported in modern browsers and is a popular choice for building user interfaces and web applications.
Flexbox works by dividing the available space within a container into flexible boxes, or flex items, that can be arranged in any direction, either horizontally or vertically. You can control the alignment, distribution, and order of the flex items using various properties that are part of the Flexbox specification.
Cheat Sheet
| Property | Description |
| display: flex; | Defines a flex container. |
| flex-direction: row/column; | Defines the direction of the flex container. |
| flex-wrap: wrap/nowrap; | Determines whether the flex items should wrap or not when they overflow the container. |
| justify-content: flex-start/center/flex-end/space-between/space-around/space-evenly; | Defines the alignment of flex items along the main axis. |
| align-items: stretch/flex-start/flex-end/center/baseline; | Defines the alignment of flex items along the cross axis. |
| align-content: stretch/flex-start/flex-end/center/space-between/space-around; | Defines the alignment of multiple lines of flex items along the cross axis. |
| order: <number>; | Specifies the order of a flex item within the flex container. |
| flex-grow: <number>; | Determines the amount of space a flex item will grow to fill in the container. |
| flex-shrink: <number>; | Determines the amount of space a flex item will shrink when the container is too small. |
| flex-basis: <length/percentage/auto>; | Specifies the initial size of a flex item before growing or shrinking. |
| flex: <flex-grow> <flex-shrink> <flex-basis>; | A shorthand property that sets all three flex properties at once. |
| align-self: auto/stretch/flex-start/flex-end/center/baseline; | Defines the alignment of a single flex item along the cross axis. |
| gap: <length/percentage>; | Defines the gap between the flex items in a flex container. |
| row-gap: <length/percentage>; | Defines the gap between the rows of flex items in a flex container. |
| column-gap: <length/percentage>; | Defines the gap between the columns of flex items in a flex container. |
| display: inline-flex; | Defines an inline-level flex container. |
| flex-flow: <flex-direction> <flex-wrap>; | A shorthand property that sets both flex-direction and flex-wrap at once. |
| align-content: space-evenly; | Defines the alignment of multiple lines of flex items along the cross axis with equal space around each line. |
| align-self: stretch; | Specifies that a single flex item should stretch to fill the cross axis. |
| justify-items: start/end/center/stretch; | Defines the alignment of flex items within their grid cell. |
| place-items: <align-items> <justify-items>; | A shorthand property that sets both align-items and justify-items at once. |
| justify-self: start/end/center/stretch; | Defines the alignment of a single flex item within its grid cell. |
| place-self: <align-self> <justify-self>; | A shorthand property that sets both align-self and justify-self at once. |
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox