display : inline-flex 基本用法当父盒子本身没有widtth 时，会让里面的子盒子刚好被父盒子包裹，

一、对于父盒子使用

当父盒子本身没有widtth 时，会让里面的子盒子刚好被父盒子包裹，即使父元素有继承上级的width

<style>
    .fa {
      /* width: 100px; */
      /* height: 100px; */
      border: 1px solid rebeccapurple;
      display: inline-flex;
    }

    .box {
      width: 40px;
      height: 40px;
      border: 1px red solid;
      
    }

    .se {
      width: 600px;
      margin: 0 auto;
      
    }

  </style>
  
  
  <body>
  
  <section class="se">
    <div class="fa">
      <div class="box">box1</div>
      <div class="box">box2</div>
   </div>
  </section>
  
  </body>

二、单独给每个子盒子使用


<style>
   .fa {
     /* width: 100px; */
     /* height: 100px; */
     border: 1px solid rebeccapurple;
   
   }

   .box {
     width: 40px;
     height: 40px;
     border: 1px red solid;
     display: inline-flex;       //在这更改了
     
   }

   .se {
     width: 600px;
     margin: 0 auto;
   }

 </style>
 
 
 <body>
 
 <section class="se">
   <div class="fa">
     <div class="box">box1</div>
     <div class="box">box2</div>
  </div>
 </section>
 
 </body>