레이아웃에서 CSS 유연한 상자 모델 플렉스를 사용하는 방법

<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;">DEMO</div>      </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;">DEMO</div>      </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;">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>     
 </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;">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>

<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;">1</div>
    <div class="child" style="background-color: lightgreen;">2</div>
    <div class="child" style="background-color: lightsalmon;">3</div>
    <div class="child" style="background-color: pink;">4</div>                
</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>left</p>
        <p>left</p>
    </div>            
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>            
    <div class="right"  style="background-color: lightgreen;">
        <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>