|-弹性盒子

|--定义弹性盒子  display：flex

|--定义子元素的排列方式  flex-direction

|--定义子元素的换行方式  flex-wrap

|--定义子元素的对齐方式

|----横向对齐  justify-content

|----纵向对齐  align-intems

.parent{    width: 800px;    height: 400px;    border: 1px solid red;    display: flex;/*定义父元素为弹性盒子*/    flex-direction: row;/*设定子元素的排列方式*/    flex-wrap: wrap;/*设定子元素的换行方式*/    justify-content: space-between;/*设定子元素的横向对齐方式*/    align-items: auto;/*设定子元素的纵向对齐方式*/}.children{    width: 170px;    height: 180px;    border: 1px solid blue;    flex:1;    align-self: flex-start;}.children1{    border: 1px solid black;    flex: 3;}

 

|-媒体查询

|--@media screen and (max-width:最大宽度) and (min-width:最小宽度)