边距:0自动不在具有显示弹性属性的嵌套div中工作

Question

我正在使用一个嵌套的div，显示属性设置为flex，我希望子div具有margin auto，以水平方式均匀地以等间距分布它们。 但“边距:0自动；” 第一个div是一个垂直的条带或容器，它具有显示柔性和方向行，子div是相同大小的立方体div，显示柔性和柔性方向与列相同，我想在子div上使用边距自动，但它不工作。

null

.panel {
  display: flex;
  flex-direction: row;
  width: fit-content;
  height: fit-content;
  margin-top: 30px;
}

.panel-opt {
  display: flex;
  flex-direction: column;
  width: 114px;
  height: 114px;
  border: solid 0.5px #707070;
  background-color: #ffffff;
  margin: 0 20px;
}

<div class="panel">
  <div class="panel-opt opt-1">
    <div class="opt-num">
      <span class="opt-num-span">125</span>
    </div>
    <div class="opt-svg">

    </div>
    <span class="opt-span">Orders</span>
  </div>
  <div class="panel-opt opt-2">
    <div class="opt-num">
      <span class="opt-num-span">125</span>
    </div>
    <div class="opt-svg">

    </div>
    <span class="opt-span">Orders</span>
  </div>
  <div class="panel-opt opt-3">
    <div class="opt-num">
      <span class="opt-num-span">125</span>
    </div>
    <div class="opt-svg">

    </div>
    <span class="opt-span">Orders</span>
  </div>
  <div class="panel-opt opt-4">
    <div class="opt-num">
      <span class="opt-num-span">125</span>
    </div>
    <div class="opt-svg">

    </div>
    <span class="opt-span">Orders</span>
  </div>
</div>

null

Answer 1

只需删除width:fit-content；并在父div.panel中添加justify-content:space-around；即可。 像这样:

.panel {
  display: flex;
  flex-direction: row;
  height: fit-content;
  margin-top: 30px;
  justify-content: space-around;
}

以下是fiddle链接:https://jsfiddle.net/khushboo097/qg92x3am/13/