CSS弹性盒模型flex在布局中的应用详解

底端对齐

CSS Code复制内容到剪贴板

<style>   
.parent{   
    display: flex;   
    align-items: flex-end;   
}   
</style>  

XML/HTML Code复制内容到剪贴板

<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">  
    <div class="in" style="background-color: lightblue; height:20px;">DEMO</div>  
    <div class="in" style="background-color: lightgreen; height:30px;">DEMO</div>  
    <div class="in" style="background-color: lightcyan; height:40px;">DEMO</div>  
    <div class="in" style="background-color: lightseagreen; height:50px;">DEMO</div>         
</div>  

输入框按钮

CSS Code复制内容到剪贴板

<style>   
.inputBox{   
    display: flex;   
    width: 250px;   
}   
.inputBox-ipt{   
    flex: 1;   
}   
</style>  

XML/HTML Code复制内容到剪贴板

<div class="inputBox">  
  <input class="inputBox-ipt">  
  <button class="inputBox-btn">按钮</button>  
</div>  

等分布局

CSS Code复制内容到剪贴板

<style>   
body,p{margin: 0;}   
.parent{   
    display: flex;   
}   
.child{   
    flex:1;   
    height: 100px;   
}   
.child + .child{   
    margin-left: 20px;   
}   
</style>  

XML/HTML Code复制内容到剪贴板

<div class="parent" style="background-color: lightgrey;">  
    <div class="child" style="background-color: lightblue;">1</div>