CodePen Embed - flex与margin的巧妙运用

<div class='wrap wrap1'>
  <div class='box box1'></div>
</div>

<div class='wrap wrap2'>
  <div class='box'></div>
  <div class='box box2'></div>
  <div class='box box3'></div>
</div>

.wrap{
  border:1px solid black;
  width:100%;
  height:200px;
  display:flex;
  margin-bottom:10px;
}

.box{
  width:50px;
  height:50px;
  background-color:red;
}

.box1{
    margin:auto;
}

.box3{
  margin-left:auto;
}

This Pen is owned by Dark Cat on CodePen.

See more by @zhushengjie123 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.