<style>
div{
/* 必须并且只能给父元素添加 */
display: flex;
/* flex-direction设置主轴方向 默认的主轴是x轴 默认值是row，从左到右*/
/* flex-direction:row ; */
/* 翻转x轴排列方向 不常用 */
/* flex-direction:row-reverse; */
/* 设置主轴方向为Y轴 就是从上到下 */
/* flex-direction: column; */
/*justify-content设置子元素在主轴的排列方式 center是居中 */
/* justify-content: center ; */
/* 让子元素平均分配父元素的空间 */
/* justify-content: space-around; */
/* 两边贴边然后分配中间的空间 */
/* justify-content: space-between; */
/* 操作侧轴的对齐方式 这只能操作单行*/
/* align-items: center; */
/* flex布局中默认是不换行的 */
/* flex-wrap: wrap; */
/* 因为有了换行所以不能用align-items所以用align-content 来操作侧轴子元素对其方式 */
/* align-content: flex-start;下一行紧贴着上一行 */
/* align-content: space-between;两边贴边然后自动分配中间 */
/* align-content: space-around;在侧轴平均分配父元素的空间 */
/* 这是把设置主轴方向和换行综合到一起了 */
flex-flow: row wrap;
width: 800px;
height: 500px;
background-color: #3b3b3b;
}
div span{
margin: 10px;
width: 150px;
height: 100px;
background-color: chartreuse;
flex: 0 1 auto;
}
</style>
