1. flex-direction

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code
  • Row (default) : the main axis is horizontal and the starting point is on the left
  • Row-reverse: The main axis is horizontal and the starting point is on the right
  • Column: the main axis is vertical and the starting point is on the upper edge
  • Column-reverse: the main axis is vertical and the starting point is lower

2. flex-wrap

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code

  • Nowrap (default) : No line feeds

  • Wrap: the first line is at the top

  • Wrap-reverse: a new line, with the first line at the bottom

3. The flex – flow:

Is shorthand for the flex-direction and flex-wrap properties. The default value is Row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code

4. justify-content

Property defines the alignment of items on the main axis

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code
  • Flex-start (default) : Left-aligned
  • Flex-end: Right alignment
  • Center: a center
  • Space-between: Aligns both ends so that items are equally spaced between each other
  • Space-around: Each item is equally spaced on both sides, so the space between the items must be twice as large as the space between the items and the border

5. align-items

Property defines how items are aligned on cross axes

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code
  • Flex-start: Start alignment of cross axes
  • Flex-end: End alignment of the cross axis
  • Center: Aligns the midpoint of the cross axis
  • Baseline: Baseline alignment of the first line of text in the project
  • Stretch (default) : If the project has no height set or is set to AUTO, it will take up the entire container height

6. align-content

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

  • Flex-start: Aligns with the starting point of the cross axis

  • Flex-end: Aligns with the end of the cross axis

  • Center: Aligns with the midpoint of the cross axis

  • Space-between: aligns with both ends of the cross axis, and the spacing between the axes is evenly distributed

  • Space-around: the spacing on both sides of each axis is equal. The spacing between the axes is twice that between the axis and the border

  • Stretch (default) : the axis takes up the entire cross axis