在缩放整个页面的时候，里面的元素可以随着页面缩放而变化

设置 display属性为flex就可以了

display:flex;

 

 

决定容器中的主轴方向用flex-direction

ex: flex-direction:row;

 

 

 

 

 

 

flex-wrap:

 

 

 

 

#container{
    background-color: blueviolet;
    width: 90%;
    height: 500px;
    margin: auto;
    display:flex;
    flex-direction: row;   //主轴
    justify-content:center; //排列
    flex-wrap:wrap;
    align-items: flex-end; //横轴
    align-content:          //分配box之间的空间。必须在flex-wrap为wrap时候才可以生效                         标红的这些属性要放在父容器中
   
}
 
 
 
 
align-self:针对单个元素

 

 

 

flex-basis:??px;

单个元素被添加到盒子中的初始大小，可能是高也可能是宽。

 

flex-grow:1；

单个元素的占用位置

 

 

flex: