flex弹性盒子布局

子元素盒子居中,flex属性加在父元素身上，而不是自身

    <h3>子元素盒子居中,flex属性加在父元素身上，而不是自身</h3>
     <div class="box1">
       <div>box1</div>
     </div>

   h3{margin-top: 20px;}
  .box1{width: 400px;height:300px;border:1px solid red;
   text-align: center;display:-webkit-flex;justify-content:center;align-items:center;}
  .box1 div{width:200px;height:200px;background-color:pink;}

 

按比例自适应带一个固定宽度  默认 flex-direction:row; 所以这里没写 下面的横向加了 因为默认的所以没加

   <h3>按比例自适应带一个固定宽度</h3>
    <div class="box2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
     </div>

  .box2{display:-webkit-flex;width: 400px;}
  .box2 div:nth-of-type(1){width:100px;background-color:red;}
  .box2 div:nth-of-type(2){flex:2;background-color:pink;}
  .box2 div:nth-of-type(3){flex:3;background-color:blue;border:4px solid black;}

 

按比例自适应完全按比例-横向  

   <h3>按比例自适应完全按比例-横向</h3>
    <div class="box3">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

  .box3{width: 400px;display:-webkit-flex;flex-direction:row;}
  .box3 div:nth-of-type(1){flex:1;background-color:red;}
  .box3 div:nth-of-type(2){flex:2;background-color:pink;}
  .box3 div:nth-of-type(3){flex:3;background-color:orange;}

按比例自适应完全按比例-纵向 flex-direction:column; 需要说明 不是默认的 默认是横向 也就是 flex-direction:row; 

   <h3>按比例自适应完全按比例-纵向</h3>
    <div class="box4">
      <div>1</div>
      <div>2</div>
      <div>3</div>
   </div>

  .box4{display:-webkit-flex;flex-direction:column;width: 400px;}
  .box4 div:nth-of-type(1){flex:1;background-color:red;}
  .box4 div:nth-of-type(2){flex:2;background-color:pink;}
  .box4 div:nth-of-type(3){flex:3;background-color:orange;}

 

转载于:https://www.cnblogs.com/Model-Zachary/p/6435405.html