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

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

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

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

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

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

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

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

div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">
    div class="in" style="background-color: lightblue; height:20px;">DEMOdiv>
    div class="in" style="background-color: lightgreen; height:30px;">DEMOdiv>
    div class="in" style="background-color: lightcyan; height:40px;">DEMOdiv>
    div class="in" style="background-color: lightseagreen; height:50px;">DEMOdiv>      
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="background-color: lightgrey;">
    div class="child" style="background-color: lightblue;">1div>
    div class="child" style="background-color: lightgreen;">2div>
    div class="child" style="background-color: lightsalmon;">3div>
    div class="child" style="background-color: pink;">4div>                
div>    

style>
p{margin: 0;}
.parent{display: flex;}
.left,.center{margin-right: 20px;}
.right{flex: 1;}
style>

div class="parent" style="background-color: lightgrey;">
    div class="left" style="background-color: lightblue;">
        p>leftp>
        p>leftp>
    div>            
    div class="center" style="background-color: pink;">
        p>centerp>
        p>centerp>
    div>            
    div class="right"  style="background-color: lightgreen;">
        p>rightp>
        p>rightp>
    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="background-color: lightgrey;">
    div class="top" style="background-color: lightblue;">
        p>topp>
    div> 
    div class="middle" style="background-color: pink;">
        div class="left" style="background-color: orange;">
            p>leftp>
        div>     
        div class="right" style="background-color: lightsalmon;">
            div class="right-in">
                p>rightp>
            div>            
        div>                    
    div>              
    div class="bottom" style="background-color: lightgreen;">
        p>bottomp>
    div>        
div>