如何使用最小和最大宽度动态缩放多个 <div>？

Question

我有一堆具有特定高度的 div。我希望宽度从 2rem 缩放到 2.75 rem，具体取决于可用空间。这可能是一个菜鸟问题，但我就是不知道该怎么做——我已经尝试过使用this answer，但是 div 没有调整大小。期望的行为是：

• 当有足够的空间时，每个 div 元素都使用最大宽度
• 当没有足够的空间来容纳所有带有 min-space 的 div 时，它们应该换行
• 在这两种情况之间，它们应该同样调整大小

HTML：

<div class="pagination-number--demo-multiple-numbers">
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    ... (more elements)

CSS：

.pagination-number--demo-multiple-numbers {
    width: 100%;
    margin: 0 auto;
}
.pagination-number {
  font-size: 0.875rem;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 0.0625rem solid #ffffff;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
.pagination-number--smaller {
  height: 2.25rem;
  line-height: 2.125rem;
}
.pagination-number--narrow-to-wide {
  min-width: 2rem;
  max-width: 2.75rem;
  width: 100%;
  margin: 0 auto;
}
.pagination-number--active {
  font-weight: 700;
  background-color: #eeeeee;
}

jsfiddle：https://jsfiddle.net/q5omjujd/

Answer 1

您可以简单地使用 Flexbox 做到这一点。只需使用以下两个更新的类将其添加到您的 CSS 中

CSS

.pagination-number--demo-multiple-numbers {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.pagination-number {
    font-size: 0.875rem;
    border: 0.0625rem solid #ffffff;
    border-radius: 4px;
    text-align: center;
    flex: 1;
    margin: 10px;
}

.pagination-number--demo-multiple-numbers {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}
.pagination-number {
  font-size: 0.875rem;
  border: 0.0625rem solid #ffffff;
  border-radius: 4px;
  text-align: center;
  flex: 1;
  margin: 10px;
}
.pagination-number--smaller {
  height: 2.25rem;
  line-height: 2.125rem;
}
.pagination-number--narrow-to-wide {
  min-width: 2rem;
  max-width: 2.75rem;
  width: 100%;
}
.pagination-number--active {
  font-weight: 700;
  background-color: #eeeeee;
}

<div class="pagination-number--demo-multiple-numbers">
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
</div>

Answer 2

尝试对 div 框的宽度和边框使用视口测量单位。此外，您不能同时使用宽度和最大宽度，因为元素将始终符合最大宽度值。使用以下 css 更新类，我想你会得到你想要的。

.pagination-number {
  font-size: 0.875rem;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 0.05vw solid #ffffff;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.pagination-number--narrow-to-wide {
   min-width: 2rem;
   /* For width: (Full viewport width - Total box border(0.5 *  10) / Total number of div boxes (10) = > 100vw-5vw => 95vw / 10 */
   width: calc(95vw /10); 
   margin: 0 auto;
}

.pagination-number--demo-multiple-numbers {
	width: 100%;
	margin: 0 auto;
}
.pagination-number {
      font-size: 0.875rem;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0.05vw solid #ffffff;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.pagination-number--smaller {
  height: 2.25rem;
  line-height: 2.125rem;
}
.pagination-number--narrow-to-wide {
   min-width: 2rem;
   width: calc(95vw /10); /* (Full viewport width - Total box border(0.5 * 10) / Total number of div boxes (10) = > 100vw-5vw => 95vw / 10 */
   margin: 0 auto;
}
.pagination-number--active {
  font-weight: 700;
  background-color: #eeeeee;
}

<div class="pagination-number--demo-multiple-numbers">
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
    <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
        42
    </div>
</div>