如何让Flexbox生成均匀完美正方形并实现内部文字自适应缩小？

问题描述 #

希望通过Flexbox布局实现均匀的完美正方形盒子，同时让盒子内的文字能随盒子大小自适应缩小，但当前盒子因内容影响发生伸缩，达不到预期效果。

当前代码如下：

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mainbox {
  background: grey;
  display: flex;
  margin: 5px;
}

.mainbox div {
  flex: 1;
  border: 2px solid black;
}

#row {
  display: flex;
  flex-direction: row;
}

#column {
  display: flex;
}

HTML代码 #

<!DOCTYPE html>
<html>

<head>
  <title>FlexSpiral</title>
</head>

<body>
  <div class="mainbox">
    <div>box 1</div>
    <div>
      box 2
      <div id="row">
        <div id="column">
          <div id="row">
            <div>box 5</div>
            <div>
              <div>box 6</div>
              <div id="row">
                <div>
                  <div id="row">
                    <div>box 9</div>
                    <div>box 10</div>
                  </div>
                  <div>box 8</div>
                </div>
                <div>box 7</div>
              </div>
            </div>
          </div>
          <div>box 4</div>
        </div>
        <div>box 3</div>
      </div>
    </div>
  </div>
</body>

</html>

解决方案 #

要实现均匀正方形盒子+文字自适应，需做以下修改：

1. 强制盒子为正方形比例 #

利用padding-top: 100%（基于父元素宽度计算，实现1:1比例）配合绝对定位固定内容区域，避免内容撑开盒子：

.box {
  position: relative;
  flex: 1;
  border: 2px solid black;
  padding-top: 100%;
  overflow: hidden;
}

.box-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

2. 重构HTML盒子结构 #

将所有内容包裹在.box和.box-content中，确保每个盒子的尺寸不受内部内容影响：

<!DOCTYPE html>
<html>

<head>
  <title>FlexSpiral</title>
</head>

<body>
  <div class="mainbox">
    <div class="box">
      <div class="box-content">box 1</div>
    </div>
    <div class="box">
      <div class="box-content">
        box 2
        <div id="row">
          <div id="column">
            <div id="row">
              <div class="box">
                <div class="box-content">box 5</div>
              </div>
              <div class="box">
                <div class="box-content">
                  box 6
                  <div id="row">
                    <div class="box">
                      <div class="box-content">
                        <div id="row">
                          <div class="box">
                            <div class="box-content">box 9</div>
                          </div>
                          <div class="box">
                            <div class="box-content">box 10</div>
                          </div>
                        </div>
                        box 8
                      </div>
                    </div>
                    <div class="box">
                      <div class="box-content">box 7</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box">
              <div class="box-content">box 4</div>
            </div>
          </div>
          <div class="box">
            <div class="box-content">box 3</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

3. 修复Flex布局继承问题 #

移除原CSS中mainbox div { flex:1; }的全局设置，避免干扰嵌套Flex容器；同时给#column设置垂直布局：

/* 移除原有全局div样式 */
/* .mainbox div {
  flex: 1;
  border: 2px solid black;
} */

#row {
  display: flex;
  flex-direction: row;
  flex: 1;
}

#column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

4. 实现文字自适应缩小 #

在.box-content中添加响应式字体和溢出处理：

.box-content {
  /* 原有样式 */
  font-size: clamp(12px, 2vw, 18px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

若需多行自适应，可替换为：

.box-content {
  /* 原有样式 */
  font-size: clamp(12px, 2vw, 18px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

最终完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mainbox {
  background: grey;
  display: flex;
  margin: 5px;
}

.box {
  position: relative;
  flex: 1;
  border: 2px solid black;
  padding-top: 100%;
  overflow: hidden;
}

.box-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-size: clamp(12px, 2vw, 18px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#row {
  display: flex;
  flex-direction: row;
  flex: 1;
}

#column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

内容的提问来源于stack exchange，提问作者123 456