2020.10.17 web前端 flex布局

flex布局

传统布局：适用于电脑端
flex弹性布局：适用于不考虑浏览器兼容性的移动端（iE11版本以下不支持）
flex布局在所有属性中都可以实现，某些属性如 clear float verticle-align将消失
布置方法：给父盒子添加flex属性
父盒子属性:
display:flex;
flex-drection 设置主轴方向 默认是横轴方向显示
flex-direction:row;
flex-direction:column;
flex-direction: row-reverse;(左右展示方向倒转) column-reverse

justify-content设置主轴上的子元素的排列方式
justify-content：flex-start ：如果flex-drection:row;那么子元素是从左向右排列
justify-content： flex-end; 让子元素靠右显示但不改变排列顺序，reverse要改变排列方式
justify-content: center;
flex-wrap设置子元素的在满行后是否换行
align-items设置子元素的位置（只用于单行文本内）
align-items: center;flex-start;end;reverse;

align-content:用于多行文本中设置副轴的子元素排列 align-content: space-between; align-content:space-around;

、
、

、
、

子元素的flex属性

flex的使用：子元素分配剩余空间
flex为占了多少份
flex:1;沾一份

  
        div p {
            flex: 1;
            height: 200px;
            width: 200px;
            background-color: rebeccapurple;
        }
        
        div p:nth-last-of-type(2) {
            flex: 2;
        }

上面的代码中 第一个P占了剩余空间一份 第二个P占了两份
align-self可以用于子元素中控制子级副轴方向上的位置
order可以控制某个子元素在所有子元素中的顺序

flex-wrap 属性和flex-direction的结合:flex-flow属性,接受两个参数(行列 是否wrap),之间用空格隔开

flex-wrap: wrap; no-wrap; wrap-reverse(向反方向折叠)