码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-24 07:16:25      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:style   splay   src   css   input   www   blog   title   justify   

  前面已经详细介绍过flex弹性盒模型的基本语法兼容写法,本文将介绍flex在布局中的应用

 

元素居中

【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

技术分享
<style>
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
技术分享
<div class="parent"  style=" height: 100px; width: 200px;">
    <div class="in" style="">DEMO</div>      
</div>

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

技术分享
<style>
.parent{
    display: flex;
}
.in{
    margin: auto;
}
</style>
技术分享
<div class="parent"  style="height: 100px;width: 200px;">
    <div class="in" style="">DEMO</div>      
</div>

 

两端对齐

技术分享
<style>
.parent{
    display: flex;
    justify-content:space-between
}
</style>
技术分享
技术分享
<div class="parent"  style="height: 100px;width: 200px;">
    <div class="in" style="">DEMO</div>
    <div class="in" style="">DEMO</div>
    <div class="in" style="">DEMO</div>
    <div class="in" style="">DEMO</div>      
</div>
技术分享

 

底端对齐

技术分享
<style>
.parent{
    display: flex;
    align-items: flex-end;
}
</style>
技术分享
技术分享
<div class="parent"  style="height: 100px;width: 200px;">
    <div class="in" style=" height:20px;">DEMO</div>
    <div class="in" style=" height:30px;">DEMO</div>
    <div class="in" style=" height:40px;">DEMO</div>
    <div class="in" style=" height:50px;">DEMO</div>      
</div>
技术分享

 

输入框按钮

技术分享
<style>
.inputBox{
    display: flex;
    width: 250px;
}
.inputBox-ipt{
    flex: 1;
}
</style>
技术分享
<div class="inputBox">
  <input class="inputBox-ipt">
  <button class="inputBox-btn">按钮</button>
</div>

 

等分布局

技术分享
<style>
body,p{margin: 0;}
.parent{
    display: flex;
}
.child{
    flex:1;
    height: 100px;
}
.child + .child{
    margin-left: 20px;
}
</style>
技术分享
技术分享
<div class="parent" style="">
    <div class="child" style="">1</div>
    <div class="child" style="">2</div>
    <div class="child" style="">3</div>
    <div class="child" style="">4</div>                
</div>    
技术分享

 

多列自适应布局

技术分享
<style>
p{margin: 0;}
.parent{display: flex;}
.left,.center{margin-right: 20px;}
.right{flex: 1;}
</style>
技术分享
技术分享
<div class="parent" style="">
    <div class="left" style="">
        <p>left</p>
        <p>left</p>
    </div>            
    <div class="center" style="">
        <p>center</p>
        <p>center</p>
    </div>            
    <div class="right"  style="">
        <p>right</p>
        <p>right</p>
    </div>                    
</div>
技术分享

 

悬挂布局

技术分享
<style>        
.box{
    display: flex;
    background-color: lightgrey;
    width: 300px;
}
.left{
    margin-right: 20px;
    background-color: lightblue;
    height: 30px;
}
.main{
    flex:1;
}
</style>
技术分享
<div class="box">
    <div class="left">左侧悬挂</div>
    <div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>    
</div>

 

全屏布局

技术分享
<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.parent{
    display: flex;
    flex-direction: column;
}
.top,.bottom{
    height: 50px;
}
.middle{
    display: flex;
    flex: 1;
}
.left{
    width: 100px;
    margin-right: 20px;
}
.right{
    flex: 1;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
</style>
技术分享
技术分享
<div class="parent" id="parent" style="">
    <div class="top" style="">
        <p>top</p>
    </div> 
    <div class="middle" style="">
        <div class="left" style="">
            <p>left</p>
        </div>     
        <div class="right" style="">
            <div class="right-in">
                <p>right</p>
            </div>            
        </div>                    
    </div>              
    <div class="bottom" style="">
        <p>bottom</p>
    </div>        
</div>
技术分享

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

标签:style   splay   src   css   input   www   blog   title   justify   

原文地址:http://www.cnblogs.com/lzbk/p/6095996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!