Question

我使用CSS flexbox和细胞的百分比大小再现金色螺旋。

使用常规边框和border-radius组合绘制圆形。

在将窗口调整为较小宽度之前，所有内容都是成比例的。

我试图完全删除边框，结果布局在某些时候仍然在失去比例。

大容器：

小容器：

演示： https://jsfiddle.net/s09rkwub/1/

HTML

<div class="wrapper">
  <div class="rows fib">
    <div class="cols fill">
      <div class="rows fill">
        <div class="fr tl">3</div>
        <div class="fill cols">
          <div class="fc bl">4</div>
          <div class="fill rows">
            <div class="fill cols">
              <div class="fill tl fr">7</div>
              <div class="fc tr">6</div>
            </div>
            <div class="fr br">5</div>
          </div>
        </div>
      </div>
      <div class="fc tr">2</div>
    </div>
    <div class="fr br">1</div>
  </div>
</div>

CSS

.rows {
  flex-direction: column;
}
.cols {
  flex-direction: row;
}
.rows,
.cols {
  display: flex;
  .fill {
    flex: 1;
  }
  > * { 
    outline: solid 1px rgba(127,127,127, 0.3);
  }
}
...

更新使用已应用的解决方案工作demo。

更新2 感谢你们的支持。我可以完成我的纤维螺旋codepen。

Answer 1

以<div class="fr br">5</div>为例，它的最小宽度为26px。因此，将螺旋缩小到一个水平，其中所提到的div的高度小于26px，它会变形。

如果您将边框宽度更改为1px而不是5px，那么您会突然看到，它能够完全缩小到18px，并且可以缩小尺寸。

这就是为什么你可能试图减少边界的原因。但是，失真的原因要简单得多：你在div中有内容，它们确实需要一些空间（即使字体颜色是透明的）。如果从div元素中删除所有数字，则会得到所需的结果。请参阅https://jsfiddle.net/s09rkwub/2/

上的演示

Answer 2

解决方案

将此添加到您的代码中：

* {
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
}

revised fiddle

说明

需要考虑两个概念：

Flex容器的初始设置为flex-shrink: 1 。

这意味着，默认情况下，Flex项目可以缩小到定义的width，height或flex-basis之下。

要防止此行为，请使用flex-shrink: 0。

此处有更多详情：What are the differences between flex-basis and width?

弹性项目的初始设置为min-width: auto。

这意味着，默认情况下，灵活项目不能小于其内容的大小（无论flex-shrink还是flex-basis）。

要允许自定义项目缩小其内容，请使用min-width: 0（行方向），min-height: 0（列方向）或overflow: hidden（其他值也可用，{{1}除外}）。

此处有更多详情：Why doesn't flex item shrink past content size?

通过下面的调整，你的弹性项目可以缩小你的div中的文本，允许缩放继续没有任何障碍：

visible

Flexbox布局在缩小尺寸时会丢失比例

2 个答案:

解决方案

说明