#弹性布局# 掌握知识后整理的笔记

学习理解笔记整理，备用

      #弹性布局#，父类容器设置为弹性布局（display:flex;），让子元素在父类容器的
  主轴和侧轴两个方向都居中，实现子元素居于父类容器水平垂直都居中。

 <---css样式表--->
<style type="text/css">
    #div1{
         width:600px;
         height:600px;  
         background:#ccc;
         display: flex;     /*设置弹性布局*/
          
         /*默认flex-dicreection值为：row (横向左对齐排列);  */ 
         /*主轴为水平方向,假想定为X，侧轴为垂直方向 假想定为Y*/
         
         justify-content:center;     /*主轴居中*/
         align-items: center;      /*侧轴居中*/
    }
    .div1{
         width:150px;
         height:100px;
         background:red;
    }

    .div2{
  	 width:130px;
         height:110px;
         background:blue;
    }
    .div3{
         width:120px;
         height:140px;
         background:green;
    }
    .div4{
         width:100px;
         height:120px;
         background:orange;
    }
</style>

<---body内--->

<div id="div1">   /**父类容器**/

        <div class="div1">1</div>
        <div class="div2">2</div>     /*3个子元素*/
        <div class="div3">3</div>
        
</div>