1. Be an elastic container that contains one or more elastic child elements

.flex-box{
    display:flex;
   }
Copy the code

2. Elastic container properties

(1) flex-direction: sets the arrangement of elastic child elements
  • Row (default) : horizontally arranged from left to right
  • Row-reverse: To reverse horizontally, with the last item at the top
  • Column: indicates the vertical array
  • Column-reverse: to reverse vertically, from back to front, with the last item at the top
(2) precision-content: applied to elastic containers, align elastic child elements along the main axis of the elastic container
  • Flex-start (default) : Child elements are displayed next to the line
  • Flex-end: Child elements are displayed immediately towards the end of the line
  • Center: Child elements are centered and displayed next to each other
  • Space-between: The children are evenly distributed on the row, and the excess space is evenly distributed between the children
  • Space-around: Children are evenly distributed on the line, with half the space between the children
(3) align-items: Set the alignment of the elastic box elements along the side axis (vertical axis)
  • Flex-start: The boundary of the lateral (vertical) start position of the child element is immediately adjacent to the lateral start boundary of the row.
  • Flex-end: The boundary of the start position of the lateral (vertical) axis of a child element is immediately adjacent to the end of the lateral axis of the row.
  • Center: The element is centered on the side (vertical) axis of the row
  • Baseline: Equivalent to ‘flex-start’ if the inline and lateral axes of a child element are the same. In other cases, this value will participate in baseline alignment
(4) flex-wrap: specify the line wrap method for the child elements of the elastic box
  • Nowrap (default) : The elastic container is a single row, in which case the elastic child may overflow the container
  • Wrap – The elastic container is multi-line, in which case the overflow part of the elastic subitem will be placed in a new line, and line breaking will occur inside the subitem
  • Wrap-reverse: reverses the wrap arrangement
(5) align-content: used to modify the flex-wrap attribute
  • Stretch (default) : Rows will stretch to take up the remaining space
  • Flex-start: Stack each row to the start position of the elastic box container
  • Flex-end: Stack each line toward the end of the elastic box container
  • Center: Stack each row in the middle of an elastic box container
  • Space-between: Rows are evenly distributed in an elastic container
  • Space-around: The rows are evenly distributed in an elastic box container, with each end retaining half the spacing between the child elements

3. Important attributes of elastic child elements

  • Order: Determines the order of the elastic elements. The smaller the number, the higher the order
.first {
          order: -1;
        }
Copy the code

4. Perfectly centered

flex-box{
          display:flex;
          justify-content:center;
          align-items:center;
        }
Copy the code