Answer»
| COMMAND | DESCRIPTION | SYNTAX |
|---|
| Flex Direction | Sets how flex items are placed in the flex container. |
flex-direction: row | row-reverse | column | column-reverse |
|---|
| Flex Wrap | Sets whether flex items are forced onto one line or can wrap onto multiple lines. |
flex-wrap: nowrap | wrap | wrap-reverse |
|---|
| Justify Content | Defines how the browser distributes space between and around content items. |
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
|---|
| Align Items | It sets the align-self value on all direct children as a group. |
gn-items: flex-start | flex-end | center | baseline | stretch |
|---|
| Align Content | Sets the distribution of space between and around content. |
align-content: flex-start | flex-end | center | space-between | space-around | stretch |
|---|
| Order | Sets the order to lay out an item in a flex or grid container. |
order: 0 |
|---|
| Flex Grow | It sets the flex-grow factor. Flex-grow is a term that refers to a system that allows you to The flex-grow factor of a flex item's main size to be controlled by the CSS property flex grow factor. |
flex-grow: 0 |
|---|
| Flex Shrink | It sets the flex shrink factor of a flex item. The flex-shrink is a method of reducing the size of a flexible object The flex-shrink factor of a flex item is controlled by the CSS attribute. |
flex-shrink: 0 |
|---|
| Flex Basis | Sets the size of the content box. The flex-basis is a system that allows you to change your mind at any A flex item's initial primary size is determined by a CSS attribute. Unless box-sizing is used, it determines the size of the content box. |
flex-basis: 3px | auto |
|---|
| Align Self | It aligns the item inside the grid area. |
gn-self: auto | flex-start | flex-end | center | baseline | stretch |
|---|
Let's understand flexbox with an example:
Code:
.flex-container {
display: flex;
}Output:
|
