flex布局

 

 图标文字上下对齐

 display: flex;

    flex-direction: column;

    justify-content: space-between;

 

父级display：flex

 

底部对齐

.aabbc {

    display: flex;

    flex-direction: column-reverse;

    justify-content: space-between;

 

 

1. flex-direction: column-reverse; */  //主轴  纵向
2.  justify-content: space-between;
3.  align-items: flex-end;    //底对齐   横向

}

}

 

 

 

 

 

两端对齐

父级

.zcgg_sy .sy_xinwen {

    align-items: center;

    display: flex;

    justify-content: space-between;

}

 

 

底对齐

  display: flex;

    justify-content: space-between;

    align-items: flex-end;

 

  display: flex;

    justify-content: flex-end;  /* 左右最末 */

  

    align-items: center;  /* 上下剧中 */

  

    height: 100%;

}