结合CSS3的布局新特征谈谈常见布局方法

2020-05-07 06:47:44易采站长站整理

justify-content

CSS Code复制内容到剪贴板

div{   
    justify-content: flex-start /*以项目开始进行排列的那端进行对齐,默认左对齐*/  
                     <flex-end> /*以项目结束排列的那端进行对齐,默认右对齐*/  
                     <center> /*居中对齐,默认水平居中*/  
           
        /*两端对齐且项目之间的间隔都相等(贴边显示)*/  
                     <space-between>    
            
         /*第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布*/  
                     <space-around>   
                       
   }   

测试时我设定了flex容器宽高都为200px,子项没有设定宽高。 效果:

主轴为水平方向时:

主轴为水平垂直时:

align-items

CSS Code复制内容到剪贴板

div{   
    align-items: flex-start /*侧轴起始点对齐*/  
                 <flex-end> /*侧轴终止点对齐*/  
                 <center> /*侧轴中点点对齐*/  
           
        /*项目的第一行文字的基线对齐*/  
                 <baselinebaseline>    
            
         /*默认值,如果项目未设定宽(高度),则占满整个容器侧轴跨度*/  
                 <stretch>