Flex的成长预期不施胶弯曲项目

Posted 2021-05-03

看来，柔性DIV里面的内容会影响其关于flex-grow属性计算的大小。难道我做错了什么？

在下面提供的小提琴，你会看到一个数字键盘。所有行包含不同的是底部排3号。该行应该有“0”为2号的宽度，因此flex-grow: 2和“：”（冒号）是1号的大小，因此flex-grow: 1。

我失去了一些东西在这里？

“0”的右侧应与8,5 2上面对齐，和。这是一个有点过。

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.button#number0 {
    flex-grow: 2;
}

.button#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

https://jsfiddle.net/0r4hemdu/

答案

短期分析

的问题是，行1-3具有两个水平边缘和行4只有一个。

在每个水平10px的边距，行4具有比其他行10px的更多的自由空间。这抛出了列的排列。

由于flex-grow仅适用于自由空间，并在很大程度上受含量和利润率的影响，它不是大小弯曲项目最安全的方式。

尝试flex-basis代替。添加到您的代码：

.button    { flex-basis: 33.33%; }
#number0   { flex-basis: calc(66.67% + 10px); }
*          { box-sizing: border-box; }

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0   { flex-basis: calc(66.67% + 10px); }
*          { box-sizing: border-box; }

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

另一答案

更新3：

我想出了另一种方式来摆脱错位的。

这个版本，与2一起：次更新，工作原理与原始的html不变，并使用伪元素来创建按钮，按钮悬停/点击的影响包括在内。

flex唯一版本

.row {
  width: 60%;
  margin: auto;
  display: flex;
}
.button {
  flex: 0 0 33.3%;
  text-align: center;
  position: relative;
  padding: 10px 5px;
  box-sizing: border-box;
  pointer-events: none;
}
.button#number0 {
  flex: 0 0 66.6%;
}

.button:before,
.button:after {
  content: " ";
  border-radius: 5px;
  border: 1px solid gray;  
  cursor: pointer;
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  pointer-events: auto;
}
.button:before {
  background: rgba(255, 255, 255, 0.9);
  z-index: -1
}
.button:hover:before {
  background: rgba(0, 0, 0, 0.1);
}
.button:hover:after {
  border: 2px solid red;
}
.button:active:before {
  background: rgba(255, 0, 0, 0.5);
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

另一答案

我觉得一切Michael_B说是正确的。只有解决方案是一个有点尴尬。我personsally不喜欢计算。它只是感觉不对。

你的问题是更普遍的一个。你把太多的责任到一个元素。在这种情况下，它的.button类。 Flex和裕度柔性成长是太多的责任。尝试打破分开。这意味着更多的DOM元素，但它可以节省你很多的痛苦。

.numbers {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
}

.row > .box {
  display: flex;
  flex-basis: 33.3333%;
  justify-content: center;
  align-items: center;
}

.row > .box.box-2 {
  flex-basis: 66.6667%;
}

.button {
  border-radius: 5px;
  border: 1px solid gray;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  width: auto;
  text-align: center;
  margin: 5px;
  width: 100%;
}

<div class="numbers">
    <div class="row">
      <div class="box"><div class="button number" id="number1">1</div></div>
      <div class="box"><div class="button number" id="number2">2</div></div>
      <div class="box"><div class="button number" id="number3">3</div></div>
    </div>
    <div class="row">
      <div class="box"><div class="button number" id="number4">4</div></div>
      <div class="box"><div class="button number" id="number5">5</div></div>
      <div class="box"><div class="button number" id="number6">6</div></div>
    </div>
    <div class="row">
      <div class="box"><div class="button number" id="number7">7</div></div>
      <div class="box"><div class="button number" id="number8">8</div></div>
      <div class="box"><div class="button number" id="number9">9</div></div>
    </div>
    <div class="row">
      <div class="box box-2"><div class="button number" id="number0">0</div></div>
      <div class="box"><div class="button" id="colon">:</div></div>
        
        
    </div>
</div>

另一答案

Flexbox，就没有很好地应对利润，在我看来。

更好的办法/解决方法我宁愿是确保所有Flex孩子有0边距，设置柔性容器justify-content: space-between;，然后给孩子们总宽度小于100％。其余的将是你的保证金。

换句话说，如果你想每行有两个元素，每个设置为49％，宽，你就会有他们之间的2％的空间。三个要素，各为32％宽，你就会有他们之间的2％。在计算器示例中，0细胞应该是66％宽，其余32％。

编辑：请注意，由于原因（即content-box是可怕的），如果有你的孩子有你需要使用box-sizing: border-box边框我的建议才能正常工作。

https://jsfiddle.net/r3L1mtbe/2/

另一答案

使用简写，以适应跨浏览器的支持是很重要的：

.row {
    display: flex;
    flex-direction: row; /* <-- this is the default so unnecessary to state */
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
   /* flex-grow: 1; replace with shorthand */ 
   flex:1 0 100%; /* probably making the "width: 100%;" unnecessary */
    justify-content: center;
}

.button#number0 {
    /* flex-grow: 2; replace with shorthand */ 
   flex:2 0 100%;
}

.button#colon {
    /* flex-grow: 1; repla
以上是关于Flex的成长预期不施胶弯曲项目的主要内容，如果未能解决你的问题，请参考以下文章
 
 在包裹上居中弯曲项目
 ActionScript 库项目与 Flex 库项目
 带有文本的显示弯曲问题[重复]
 显示：弯曲；与计算（）；表现
 Flex-grow 没有按预期工作（弹性项目没有我期望的宽度）
 flex 项目不使用 flex-grow 扩展或收缩