练习（弹性盒子）

    

        
1
        
2
        
3
        
4
        
5
    

    

样式为:

把main设置为弹性盒子
    .main{
        display: flex;
    }

样式为：

flex-flow

flex-direction

默认的flex-direction值为row，效果如上图

其他值

    .main{
        display: flex;
        
        flex-direction: row-reverse;
        
        flex-direction:column;
        
        flex-direction:column-reverse;
    }

1.row-reverse的效果：

2.column效果：

3.column-reverse效果：

修改了main的高度为1100px，否则无法显示全

flex-wrap

弹性盒的项目默认都是排列在一个轴上
如果项目多的话，会“弹性”压缩在一行

增加item的数量到8个

          .main{
              display: flex;
              
              flex-wrap: no-wrap;
              
              flex-wrap: wrap;
              
              flex-wrap: wrap-reverse;
          }

no-wrap效果为：

wrap效果为：

wrap-reverse效果为：
修改main行高500px，否则不能完全显示

justify-content

      .main{   
         
          /*justify-content:center;*/
          
          /* justify-content:flex-end; */
          
          /* justify-content: flex-start; */
          
          /* justify-content: space-around; */
          
          /* justify-content: space-between; */
          
          /* justify-content: space-evenly; */
      }

center：居中

flex-end：右对齐

flex-start：左对齐（默认）

space-around:两端间隔对齐（项目间间隔是项目与边框间隔的2倍）

space-evently:平分空白对齐

• 增加一个item就更清晰了

space-between：两端对齐（项目间间隔相同）

align-items

      .main{
          
          align-items: baseline;
          
          align-items: stretch;
          
          align-items: center;
          
          align-items: flex-end;
          
          align-items: flex-start;
      }

1.baseline

项目第一行文字的基线对齐

2.stretch

未设置高度时（或height：auto）把项目整个容器的高度占满

3.center效果：

4.flex-end效果：

5.flex-start效果：

align-content

      .main{
          display: flex;
          flex-wrap:wrap;
          
          align-content: center;
          
          align-content: flex-end;
          
          align-content: flex-start;
          
          align-content: space-around;
          
          align-content: space-between;
          /* align-content: unset; */
      }

默认情况下

1.center

2.flex-end

3.flex-start

4.space-around

5.space-between

order

增加CSS代码
          .item:nth-child(1){
              order: 2;
          }
          .item:nth-child(2){
              order: 1;
          }
          .item:nth-child(3){
              order: 2;
          }
          .item:nth-child(4){
              order: 1;
          }
          .item:nth-child(5){
              order: 2;
          }
          .item:nth-child(6){
              order: 4;
          }
          .item:nth-child(7){
              order: 3;
          }
          .item:nth-child(8){
              order: -5;
          }

效果：

flex

      .item:nth-child(1){
          /* order: 2; */
          /* flex-grow: 3; */
          /* flex-basis: 300px; */
          align-self: flex-end;
      }
      .item:nth-child(2){
          /* order: 1; */
          /* flex-grow: 2; */
          /* flex-shrink: 2; */
          /* flex-basis: 275px; */
          align-self: center;
      }
      .item:nth-child(3){
          /* order: 2; */
          /* flex-grow: 1; */
          /* flex-shrink: 3; */
          /* flex-basis: 250px; */
      }
      .item:nth-child(4){
          /* order: 1; */
          /* flex-grow: 0; */
          /* flex-shrink: 2; */
          /* flex-basis: 225px; */
          align-self: center;
      }
      .item:nth-child(5){
          /* order: 2; */
          /* flex-grow: 2; */
          /* flex-shrink: 1; */
          /* flex-basis: 150px; */
          align-self: flex-end;
      }
      .item:nth-child(6){
          /* order: 4; */
          /* flex-grow: 8; */
          /* flex-shrink: 3; */
          /* flex-basis: 175px; */
          align-self: flex-end;
      }
      .item:nth-child(7){
          /* order: 3; */
          /* flex-grow: 3; */
          /* flex-shrink: 2; */
          align-self: center;
      }
      .item:nth-child(8){
          /* order: -5; */
          /* flex-grow: 2; */
          /* flex-shrink: 1; */
          /* flex-basis: 225px; */
          align-self: flex-end;
      }

fles-grow

在使用时，设置flea-wrap为wrap

效果：

flex-shrink

不设置flew-wrap为wrap

效果：

flex-basis

设置设置flea-wrap为wrap，可以看到，明显的变化

效果：

flex-self

设置某个项目在主轴上的对齐方式

效果：

代码

    
    
    
    
    


    

        
        
        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8