Flexbox, or Flexible Box Module, is a layout model in CSS that allows you to design a flexible responsive layout structure without using float or positioning. It's designed to improve the items alignment, directions and order in the container even when they are with dynamic or even unknown size.

Here are some of the most commonly used properties in Flexbox:

1. `display`: This property is used on the container to define a flex container. It can be set to either `flex` or `inline-flex`.

2. `flex-direction`: This property defines the direction of the flex items in the flex container. It can be set to `row`, `row-reverse`, `column`, or `column-reverse`.

3. `justify-content`: This property aligns the flex items along the main axis of the current line of the flex container. It can be set to `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, or `space-evenly`.

4. `align-items`: This property defines the default behavior for how flex items are laid out along the cross axis on the current line. It can be set to `stretch`, `flex-start`, `flex-end`, `center`, or `baseline`.

5. `flex-wrap`: This property specifies whether flex items are forced onto one line or can wrap onto multiple lines. It can be set to `nowrap`, `wrap`, or `wrap-reverse`.

6. `flex-flow`: This is a shorthand property for setting both `flex-direction` and `flex-wrap`.

7. `align-content`: This property aligns a flex container's lines within the flex container when there is extra space in the cross-axis. It can be set to `stretch`, `center`, `flex-start`, `flex-end`, `space-between`, or `space-around`.

8. `flex`: This is a shorthand property that specifies the ability of a flex item to alter its dimensions to fill available space. It is a combination of `flex-grow`, `flex-shrink`, and `flex-basis`.

9. `align-self`: This property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. It can be set to `auto`, `stretch`, `center`, `flex-start`, `flex-end`, or `baseline`.

10. `order`: This property controls the order in which items appear in the flex container. It can take any integer value, with default being 0.

Question

Flexbox, or Flexible Box Module, is a layout model in CSS that allows you to design a flexible responsive layout structure without using float or positioning. It's designed to improve the items alignment, directions and order in the container even when they are with dynamic or even unknown size.

Here are some of the most commonly used properties in Flexbox:

1. `display`: This property is used on the container to define a flex container. It can be set to either `flex` or `inline-flex`.

2. `flex-direction`: This property defines the direction of the flex items in the flex container. It can be set to `row`, `row-reverse`, `column`, or `column-reverse`.

3. `justify-content`: This property aligns the flex items along the main axis of the current line of the flex container. It can be set to `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, or `space-evenly`.

4. `align-items`: This property defines the default behavior for how flex items are laid out along the cross axis on the current line. It can be set to `stretch`, `flex-start`, `flex-end`, `center`, or `baseline`.

5. `flex-wrap`: This property specifies whether flex items are forced onto one line or can wrap onto multiple lines. It can be set to `nowrap`, `wrap`, or `wrap-reverse`.

6. `flex-flow`: This is a shorthand property for setting both `flex-direction` and `flex-wrap`.

7. `align-content`: This property aligns a flex container's lines within the flex container when there is extra space in the cross-axis. It can be set to `stretch`, `center`, `flex-start`, `flex-end`, `space-between`, or `space-around`.

8. `flex`: This is a shorthand property that specifies the ability of a flex item to alter its dimensions to fill available space. It is a combination of `flex-grow`, `flex-shrink`, and `flex-basis`.

9. `align-self`: This property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. It can be set to `auto`, `stretch`, `center`, `flex-start`, `flex-end`, or `baseline`.

10. `order`: This property controls the order in which items appear in the flex container. It can take any integer value, with default being 0.

Knowee AI · Accepted Answer