css - flexbox 元素即使在包装上也具有相同的大小

Question

我有一个包含结果的列，现在所有元素都需要 flex 以填充该行，现在只有当 1 个 blok 换行时它才会占据容器的整个宽度。

我需要得到的是所有 block 的大小仍然相同，这可以用 flexbox 实现吗？

.u-flexbox--spaceAround {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.u-flex-1 {
  flex: 1;
}
.hotelOutlet-hotel {
  min-width: 150px;
  height: 150px;
  background: red;
  margin: 24px;
}

<div class="hotelOutlet-results u-flexbox--spaceAround">
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
</div>

Answer 1

将您的 div 设置为 150 px 的 max-width 会满足您的要求，如下面的代码片段所示:

(以全屏模式运行)

.u-flexbox--spaceAround {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.u-flex-1 {
  flex: 1;
}
.hotelOutlet-hotel {
  min-width: 150px;
  max-width:150px;
  height: 150px;
  background: red;
  margin: 24px;
}

<div class="hotelOutlet-results u-flexbox--spaceAround">
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
  <div class="hotelOutlet-hotel u-flex-1">

  </div>
</div>