flex布局子项常见属性(flex属性,align-self控制子项自己在侧轴上的排列方式,order属性自定义项目的排列顺序)

flex布局子项常见属性

flex布局子项常见属性(flex属性,align-self控制子项自己在侧轴上的排列方式,order属性自定义项目的排列顺序)_第1张图片

flex属性

flex属性定义子项目分配剩余空间,用flex来表示分成多少份

实际上我测试下来发现,flex来定义分多少份是不准确的,我尝试将第三个div也添加flex属性,结果发现实际是总宽度减去第一个div宽度,再分成第二个div与第三个div的flex相加的份数

flex布局子项常见属性(flex属性,align-self控制子项自己在侧轴上的排列方式,order属性自定义项目的排列顺序)_第2张图片




    
    
    
    Document
    


    

flex布局子项常见属性(flex属性,align-self控制子项自己在侧轴上的排列方式,order属性自定义项目的排列顺序)_第3张图片

align-self控制子项自己在侧轴上的排列方式

这个属性相当于是把一个元素单独的拿出来在侧轴上进行排列位置,排列方式和之前的align-items相同

flex布局子项常见属性(flex属性,align-self控制子项自己在侧轴上的排列方式,order属性自定义项目的排列顺序)_第4张图片

 




    
    
    
    Document
    
    


    
1 2 3

flex布局子项常见属性(flex属性,align-self控制子项自己在侧轴上的排列方式,order属性自定义项目的排列顺序)_第5张图片

order属性自定义项目的排列顺序

设置在一条主轴上,项目的前后顺序,数值越小,越排在前,默认为0,这个和z-index并不同,z-index是层叠,这个是前后

div span:nth-child(2) {
            order: -1;
        }



    
    
    
    Document
    
    


    
1 2 3

flex布局子项常见属性(flex属性,align-self控制子项自己在侧轴上的排列方式,order属性自定义项目的排列顺序)_第6张图片

你可能感兴趣的:(《移动端布局》第二站,css,html,css3)