This is the 21st day of my participation in the August Text Challenge.More challenges in August

Getting to know the Flex layout

01. A few concepts

• Flex layout

  An elastic box layout is a way to add Flex attributes to parent elements to control the placement and arrangement of child elements

• Main and side shafts

  Spindle: The axis along which the Flex elements are aligned

  Side axis: The axis perpendicular to the orientation of the Flex elements

02. Several attributes

(1) Attributes of the parent element

Setting the parent element controls the arrangement of child elements

• 1. Flex-direction: Set the spindle direction. If one spindle is set, the other is set to the side axis

  Reverse can be added after the attribute value

  Attribute values	describe
  row	Horizontal, left to right along the X-axis, default,
  column	Arranged vertically, from top to bottom along the Y-axis
  row-reverse	Horizontally, from right to left along the X-axis
  column-reverse	Arranged vertically, from bottom to top along the Y-axis

• 2. Justify -content: Sets the arrangement of child elements in the main axis

  Attribute values	describe
  flex-start	Left to right (top to bottom) along the main axis, default
  flex-end	Arrange from right to left (bottom to top) from the main axis
  center	Align center
  space-around	Divide the remaining space equally
  space-between	Edges are affixed at both ends, and the remaining space is evenly distributed among the middle sons

  Horizontal direction:

Vertical direction:

• 3. Flex-wrap: Sets whether child elements are wrapped

  Attribute values	describe
  nowrap	No line breaks, default, scaling parent elements, scaling child elements as well
  wrap	Set a newline

• 4. Align-items: sets the arrangement of single row child elements in the side axis ———— only applies to single row

  Attribute values	describe
  flex-start	From the very beginning
  flex-end	Since after
  center	Center aligned on the side axis
  stretch	Stretch (default)

  Horizontal direction:

Vertical direction:

• 5. Align-content: The arrangement of multi-line child elements in the side axis —————— works for multi-line elements

  This property is used only if line breaks are set and has no effect on single lines

  Flex-wrap :wrap;

  Attribute values	describe
  flex-start
  flex-end
  center
  space-around
  space-between
  stretch

  Horizontal direction:

Vertical direction:

• 6.flex-flow: compound property, setting the main axis and whether to wrap

• Grammar:

.father {
    /* First add flex */ to the parent element
    display: flex;
    
    width: 100%;
    height: 200px;

    /* Six common attributes in the parent element */
    /* 1. Set the main axis */
    flex-direction: row;

    /* 2. Set the arrangement of the children in the main axis */
    justify-content: center;
    
    /* 3. Set whether the child element is newline */
    flex-wrap: nowrap;
    
    /* 4. The arrangement of single line child elements on the side axis ———— applies only to single line */
    align-items: center;
    
    /* 5. Set the arrangement of multi-line child elements on the side axis —————— applies to multi-line */
    align-content: center;
    
    /* 6. Compound property, set the main axis and whether to break line */
    /* flex-flow: row nowrap; * /
}

Copy the code

(2) Attributes of child elements

• Grammar:

.son{
     /* Attributes on child elements */

    /* 1. Set the number of shares the element can allocate to the remaining space */
    /* That is, add up the fractions of all the children, and then what fraction of the width of the parent */
    flex: 1;

    /* 2. Set the arrangement of the children themselves on the side axis */
    align-self: center;

    /* 3. Order controls the order of subitems. The smaller the subitems are, the higher the subitems are
    order: inherit;
}

Copy the code

I front-end side dish chicken, if there is wrong, please forgive