移动WEB开发之flex布局

传统布局和flex布局的对比

 

 

 一句话总结:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

 

 

 默认的主轴是x轴行row 

 使用属性之前那一定要看flex-direction 确定好主轴是哪个

 flex布局中,默认的子元素不换行, 如果装不下 会缩小子元素的宽度放到父元素内

如果不想要这种效果,那就修改flex-wrap属性

 设置侧轴属性

 其中stretch属性 子盒子不能给高度

 flex-flow

例 flex-flow:row wrap

 ---------------------------------------------------------------------------------------

常用的子项属性

 这两个属性了解就好