flex伸缩布局

1.flex伸缩布局

父元素加display:flex;

案例1：给3个子元素加flex:1;/*1代表份数 子元素加margin，子元素也不会掉下来  拉动浏览器，子元素可以进行伸缩*/

案例2：限制第一个子元素宽度为200px，其他2个子元素加flex:1;/*1代表份数 表示先减去第一个盒子的宽度，剩下的位置由2个子元素平分，拉动浏览器，子元素可以进行伸缩*/

案例3：父元素规定最小宽度，min-width:500px，里面的子元素最小伸缩到500px，就不能伸缩了。/*max-width最大宽度  min-height  max-height*/

案例4：给父元素加上flex-deriction:column;/*指垂直分布*/