主页 / 问题 / 890061
Accepted
MaximPro
Asked:2020-10-07 17:47:47 +0000 UTC2020-10-07 17:47:47 +0000 UTC

容器弹性盒元素不保持其长度

  • 772

问题是我想设置其基本长度（按照惯例应该是 100px）的第一个元素以某种方式减少了。

.main{
  display:flex;
  flex-flow:row nowrap;
  width:500px;
  background:red;
  padding:10px;
}
.item1{
  flex:1 1 100px;
  background:#979797;
}
.item2{
  flex:1 1 auto;
  background:#373737;
}
<div class="main">
 <div class="item1">1</div>
 <div class="item2">Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности требуют определения и уточнения систем массового участия.</div>
<div>

正如我发现的那样，flex-shrink 属性是所有事情的罪魁祸首，如果你从 1 替换为 0（对于 item1），那么第一个元素将不会参与压缩，它将保留它的长度，这是最初写入它的. 问题是如果第二个元素设置为自动，为什么 flex-shrink 会影响第一个元素？

html

2 个回答

  1. 在此处输入图像描述一切都为你工作，改变第一个块flex: 1 0 100px，它不会减少，但flex: 0 0 100px最好不要增长。也许您与浏览器有冲突，我建议您分别使用每个属性。

    .main{
  display:flex;
  flex-flow:row nowrap;
}
.item1{
  flex:0 0 100px;
  background:#979797;
}
.item2{
  flex:1 1 auto;
  background:#373737;
}
    <div class="main">
 <div class="item1">Заголовок</div>
 <div class="item2">Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности требуют определения и уточнения систем массового участия. Повседневная практика показывает, что новая модель организационной деятельности в значительной степени обуславливает создание форм развития. Таким образом сложившаяся структура организации обеспечивает широкому кругу (специалистов) участие в формировании новых предложений.</div>
<div>

    • 0
  2. Best Answer

    问题是第二个块超出了弹性容器的范围。正如我之前所说，财产是罪魁祸首flex-shrink。如果我们为两个容器重置此属性，这将意味着不会对它们应用压缩。现在让我们看看这两个容器的总宽度是多少。我有我需要的第一个容器 100 像素和第二个 1180 像素。为什么是1180px，因为一行中的文字占用了这么多空间（宽度没有明确的限制，但是值在flex-basis:auto;.）。这就是所有这些数字的来源。但我问为什么第二个容器占用太多空间，甚至吃了第一个容器的一块。问题是两者都包括在内flex-shrink。无论初始宽度如何，它们都将处于压缩状态。那么，你怎么知道具体应该如何压缩所有这些？

    有这个公式：

    ширинаНужногоКонтейнера*коэфициентСжатияНужногоКонтейнера/(ширинаN1Контейнера*коэфициентСжатияN1Контейнера+...+ширинаN+XКонтейнера*коэфициентСжатияN+XКонтейнера)*(ШиринаДоступногоПространства-(СуммаШиринВсехКонтейнеровБезКоэфициентовСжатия))+ширинаНужногоКонтейнера

    如果将此公式翻译成我的示例，它将如下所示：

    console.log(100*1/(100*1+1180*1)*(500-(100+1180))+100)

    这里我得到了第一个容器的宽度，其余的宽度可以毫不费力地得到。

    实际上，这是我想收到的问题的答案。

    • 0

相关问题