弹性盒子模型之flex属性总结

1、技术点：display:flex将块状元素能在一排显示；flex需要添加到父元素上；子元素默认从左到右进行排序。

2、justify-content：设置横轴的排列方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

(1)flex-start:交叉轴的起点对齐。

.box{ 
   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：flex-start; 
 }

(2)flex-end:右对齐

.box{ 
   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：flex-end; 
 }

(3)center:居中对齐

.box{

   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：center;

(4)space-between:两端对齐，项目之间的间隔相等。

.box{ 
   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：space-between; 
 }

(5)space-around：每个项目的两侧间隔相等，项目之间的间隔比项目与边宽的间隔大一倍。

.box{ 
   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：space-around; 
 }

3.align-items:设置竖轴的排列方式

align-items: flex-start | flex-end | center | baseline | stretch;

(1)flex-start:默认值，左对齐

.box {        
　　　　 height: 700px;         
        background: blue;         
        display: flex;         
        align-items: flex-start;     
}

(2)flex-end:交叉轴的终点对齐

.box {        
　　　　 height: 700px;         
        background: blue;         
        display: flex;         
        align-items: flex-end;     
}

(3)center：垂直居中

.box {        
　　　　 height: 700px;         
        background: blue;         
        display: flex;         
        align-items:center;     
}

(4)baseline：项目的第一行文字的基线对齐

.box {        
　　　　 height: 700px;         
        background: blue;         
        display: flex;         
        align-items: baseline;     
}

我给三个盒子设置了不同的字体大小，效果会更加明显。

(5)stretch：默认值。如果项目未设置高度或设为auto，将占满容器的整个高度。

.box {        
　　　　 height: 300px;         
        background: blue;         
        display: flex;         
        align-items: stretch;     
}

 /*不设置高度，元素在垂直方向上铺满父容器*/

.box div {width: 200px; }

弹性盒子模型之flex属性总结

推荐阅读