flexbox项目的flex甚至在包装时都具有相同的大小

Question

我有一个包含结果的列，现在所有项目都需要弯曲以填充该行，现在只有当1个blok换行时它占用了容器的整个宽度。

我需要得到的是所有的块都是相同的尺寸，这可以用flexbox吗？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将您的div设置为max-width 150 px可以满足您的需求，如下面的代码段所示：

（以全屏模式运行）

.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>