CSS3 弹性盒子(Flex Box)

2017-11-28 本文已影响91人墨马

当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。按比例分配父标签的宽度(或高度)空间。

子元素实现按比例分配

.son1 {
    flex: 2;
}

父元素也是需要添加必要的声明的

.father {
    display: flex;
 }

下面是具体实例：

.father{
     display: flex; 
     width:600px;
     height:200px;
}
.son1 {
    flex: 2;
    background:red;
}
.son2{
    flex: 1;
    background:blue;
}
 .son3{
    flex: 1;
    background:deeppink;
}

<div class="father">          
    <div class="son1"></div>  
    <div class="son2"></div>  
    <div class="son3"></div>  
</div>

2:1:1

如下盒子3实现具体宽度300px,而剩余空间由1和2按2：1实现分配

.son3 {
     width: 300px; 
     background:deeppink;
}

2:1:300px

flex-direction（指定了弹性子元素在父容器中的位置顺序）

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

flex-direction:column

justify-content (指定弹性容器的对齐方式)

下面定义父盒子的背景为灰色

flex-start：左对齐
flex-end：右对齐
center：居中对齐
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items （决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现）

其中stretch为默认值，为拉伸，也就是父标签高度过高，其孩子元素的高度就多高

flex-start表示顶边对齐，
flex-end为底部对齐
center为居中对齐
baseline表示基线对齐。

align-self(用于设置弹性元素自身在垂直方向上的对齐方式)

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

.father{                        
    background:gray;            
    display: flex;              
    width:300px;                
    height:200px;               
}                               
.son1 {                         
    flex:1;                     
    height: 100px;              
    align-self: flex-start;     
    background:red;             
}                               
.son2{                          
    flex:1;                     
    height: 100px;              
    align-self: flex-end;       
    background:blue;            
}                               
 .son3{                         
    flex:1;                     
    height: 100px;              
    align-self: center;         
    background:deeppink;        
}                               
 .son4{                         
    flex:1;                     
    height: 100px;              
    align-self: baseline;       
    background:greenyellow;     
}

<div class="father">         
    <div class="son1"></div> 
    <div class="son2"></div> 
    <div class="son3"></div> 
    <div class="son4"></div> 
</div>

flex-wrap 属性（指定弹性盒子的子元素换行方式）

nowrap - 默认，弹性容器为单行。弹性子项溢出按比例分配

.father{                 
    background:gray;     
    display: flex;       
    flex-wrap:nowrap;    
    width:300px;         
    height:200px;        
}                        
.son1 {                  
    width:100px;         
    background:red;      
}                        
.son2{                   
    width:100px;         
    background:blue;     
}                        
 .son3{                  
    width:200px;         
    background:deeppink; 
}                        .father{                 
    background:gray;     
    display: flex;       
    flex-wrap:wrap  ;    
    width:300px;         
    height:200px;        
}                        
.son1 {                  
    width:100px;         
    background:red;      
}                        
.son2{                   
    width:100px;         
    background:blue;     
}                        
 .son3{                  
    width:200px;         
    background:deeppink; 
}

实际效果75px:75px:150px

wrap - 弹性容器为多行。弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列

弹性子元素排序(order: Num)

用整数值来定义排列顺序，数值越小，位置就越靠前。可以为负值。

.father{                    
    background:gray;        
    display: flex;          
    width:300px;            
    height:200px;           
}                           
.son1 {                         
    flex:2;                 
    order:2;                
    background:red;         
}                           
.son2{                       
    flex:1;                 
    order:1;                
    background:blue;        
}                           
 .son3{                     
    order:1;                
    flex:1;                 
    background:deeppink;    
}

<div class="father">         
    <div class="son1"></div> 
    <div class="son2"></div> 
    <div class="son3"></div> 
</div>

完美的居中

使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素完全居中:

.father{             
    background:gray; 
    display: flex;   
    width:300px;     
    height:200px;    
}                    
.son1 {              
    width:100px;     
    height: 100px;   
    margin: auto;    
    background:red;  
}

<div class="father">               
    <div class="son1"></div>       
</div>