Mobile web training day-2

3. Flex Layout

3.1 Part of the

1. effect ：
   • be based on Flex Accurately and flexibly control the layout of block level boxes , Avoid separation from document flow in floating layout .
   • Flex Layout Very suitable for structured layout
2. Setting mode ：
   • The parent element adds display: flex
   • Tips ： there Parent element Must be Dad
3. Part of the ：
   1. Elastic container ： Parent element , Dad
   2. Elastic box ： Subelement
   3. Spindle ： The default is the horizontal direction , therefore flex By default, the layout is arranged horizontally along the main axis
   4. Side axle ： The default is vertical

3.2 Spindle alignment ：justify-content

effect ： Adjust the spacing between the main axes of the elastic box

/* flex Layout  */
display: flex;

/*  Adjust the horizontal spacing  */
/*  The default value is , From left to right , No spacing  */
/* justify-content: flex-start; */
/*  The default value is , From right to left , No spacing  */
/* justify-content: flex-end; */
/*  Center along the main axis , No spacing  */
/* justify-content: center; */
/*  In the direction of the spindle , Each box has the same left-right spacing  */
/* justify-content: space-around; */
/*  In the direction of the spindle , The leftmost and rightmost boxes are close to the left and right of the parent , The gap tie is allocated to other joint ventures  */
/* justify-content: space-between; */
/*  In the direction of the spindle , Each elastic box has the same spacing  */
justify-content: space-evenly;

3.3 Side axis alignment ：align-items

effect ： Adjust the position of the side axis direction of the elastic box

The key is Vertical center ：center

.box {
    
  /*  Horizontal arrangement  */
  display: flex;
  /*  Side axis alignment :  Vertically centered （ important ） */
  /* align-items: center; */

  /*  The default value is , The elastic box will move along the side axis   Stretch to the height of the elastic container  */
  align-items: stretch;

  height: 300px;
  margin: auto;
  border: 1px solid #000;
}

/*  Elastic box size description ：  Elastic layout , If the elastic box is not set with a fixed size , The default is the content size   A flexible box , Similar to inline block display mode , Can set size , The default box size can also be determined by the content  */

3.4 Expansion ratio

effect ： Adjust the width of the elastic box occupying the rest of the elastic container

Code ：

/*  Means to divide the remaining part of the elastic container into 2 branch  2 Elastic box No 2 Share  */

/*  The second elastic box  */
.box div:nth-child(2) {
    
  /*  Set the elastic box expansion ratio  */
  flex: 2;
}

effect ：

Code ：

/*  Means to divide the remaining part of the elastic container into 6 branch  2 Elastic box No 2 Share  3 Elastic box No 4 Share  */

/*  The second elastic box  */
.box div:nth-child(2) {
    
  /*  Set the elastic box expansion ratio  */
  flex: 2;
}

/*  The third elastic box  */
.box div:nth-child(3) {
    
  flex: 4;
}

effect ：