Flex Flexible layout notes

• flex-direction: Text arrangement direction

  1. row： The default value is , Horizontal arrangement , Sort from the left
  2. row-reverse: Sort horizontally , Sort from the right
  3. column: Vertical sort , Sort it from top to bottom
  4. column-reverse: Vertical sort , Sort from bottom to top

• flex-wrap： Whether the text is sorted by wrapping

  1. nowrap: Default , Don't wrap
  2. wrap： Line break , Arrange multiple rows
  3. wrap-reverse: Line break , The first line is at the bottom

• align-content： Use alignment when arranging multiple rows , If there is only a single line, this attribute does not take effect

  1. stretch： The default value is , The axis occupies the entire cross axis .
  2. center： In the middle , Align with the midpoint of the cross axis
  3. flex-start ： Start sorting on the left , Align with the starting point of the intersection
  4. flex-end: Start sorting on the right , Align with the end of the intersection
  5. space-between： Align with both ends of the cross axis , The average distribution of spacing between axes
  6. space-around： The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .

• justify-content： Align according to the spindle

  1. flex-start ： The default value is , Start sorting on the left to align ,
  2. center： In the middle
  3. flex-end: Start sorting on the right to align ,
  4. space-between： full-justified , The spacing between elements is equal
  5. space-around： The spacing on both sides of each element is equal , So the spacing between elements is twice as large as the spacing with the border

• align-items ： Align on the cross axis

  1. stretch： The default value is , If the element has no height or is set to auto, Will fill the entire container

  2. flex-start： Start sorting on the left , Align the starting points of the intersecting axes

  3. flex-end： Start sorting on the right , The ends of the intersecting axes are aligned

  4. center： In the middle , Align the midpoint of the intersecting axis

  5. baseline: Baseline alignment of the first line of text for the project

• flex attribute

  • flex-grow, flex-shrink and flex-basis Abbreviation

  • flex:1
    

​

​

​

​

​

​

​

​

​

​

​

​

​