关于margin:auto 的妙用

margin:auto只知道可以使块级元素水平居中，深入了解，才知以下妙用

参考文章：juejin.cn/post/684490…

一、在flex布局中，margin:auto可以实现的效果

如果一侧定值，一侧auto，则auto为剩余空间大小 如果两侧均是auto，则平分剩余空间

demo如下：

<div class="box">
    <div class="boxitem boxitem1">11</div>
    <div class="boxitem boxitem2">22</div>
    <div class="boxitem boxitem3">33</div>
    <div class="boxitem boxitem4">44</div>
    <div class="boxitem boxitem5">55</div>
  </div>

 .box {
        height: 300px;
        border: 1px solid black;
        display: flex;
      }
  .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }

实现效果：

1.实现不同个数，两端对齐

  .boxitem1 {
    margin-right: auto;
  }

实现效果：

第一块子盒子设置：margin-right:auto

  .boxitem5 {
    margin-left: auto;
  }

第五块子盒子：margin-left:auto

  .boxitem4 {
        margin-left: auto;
  }
  或者
  .boxitem3 {
        margin-right: auto;
  }
  二者实现效果均为下图
  

第四块子盒子：margin-left:auto

补充俩点：

 .box {
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: flex-end;
  }
  .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }
  实现效果和下边代码同：
  .box {
    height: 300px;
    border: 1px solid black;
    display: flex;
    /* justify-content: flex-end; */
  }
  .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }
  .boxitem1 {
    margin-left: auto;
  }

父元素设置：justify-content: flex-end与第一个元素设置：margin-left: auto;实现效果同

 .box {
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: flex-start;
  }
  .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }
   实现效果和下边代码同：
  .box {
    height: 300px;
    border: 1px solid black;
    display: flex;
    /* justify-content: flex-start; */
  }
  .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }
   .boxitem5 {
    margin-right: auto;
  }

父元素设置：justify-content: flex-start与最后一个元素设置：margin-right: auto;实现效果同

2.不一样的space-between

space-between实现效果：

 .box {
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
  }
  .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }

效果图：

justify-content: space-between;

 .box {
    height: 300px;
    border: 1px solid black;
    display: flex;
  }
  .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }
  .boxitem1 {
     margin-right: auto;
  }
   .boxitem5 {
     margin-left: auto;
  }
  

效果图：

  .boxitem2 {
     margin-right: auto;
  }
  .boxitem4 {
     margin-left: auto;
  }
  

效果图：

3.不一样的space-around

demo：sapce-around

.box {
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: space-around;
  }
 .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }

justyfy-content:space-around

.box {
    height: 300px;
    border: 1px solid black;
    display: flex;
  }
  .boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
  }
 .boxitem1,.boxitem4 {
  margin-left:auto
 }
 .boxitem2,.boxitem5{
    margin-right:auto
 }

效果图：

二、margin:auto配合绝对定位实现水平和垂直方向的居中

 <div class="box">
    <div class="boxitem boxitem1">11</div>
  </div>

.boxitem {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    border: 1px solid blue;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

实现效果：