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

前面的话

前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用
 
元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

JavaScript Code复制内容到剪贴板

<style>   
.parent{   
    display: flex;   
    justify-content: center;   
    align-items: center;   
}   
</style>  

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

<div class="parent"  style="background-color: lightgrey; height: 100px; width: 200px;">  
    <div class="in" style="background-color: lightblue;">DEMO</div>         
</div>  

【2】在伸缩项目上使用margin:auto

CSS Code复制内容到剪贴板

<style>   
.parent{   
    display: flex;   
}   
.in{   
    margin: auto;   
}   
</style>  

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

<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">  
    <div class="in" style="background-color: lightblue;">DEMO</div>         
</div>  

两端对齐

CSS Code复制内容到剪贴板

<style>   
.parent{   
    display: flex;   
    justify-content:space-between   
}   
</style>  

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

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