为了账号安全，请及时绑定邮箱和手机立即绑定

Flex-按预期增长，而不是调整FLEX项目的大小。

首页 猿问 Flex-按预期增长，而不是调整F...

Flex-按预期增长，而不是调整FLEX项目的大小。

Html5 CSS3 Html/CSS
幕布斯6054654 2019-07-11 10:43:14
Flex-按预期增长，而不是调整FLEX项目的大小。看起来，Flexdiv中的内容会影响到它的计算大小。flex-grow财产。我做错什么了吗？在下面提供的小提琴中，你会看到一个数字垫。除底部行外，所有行都包含3个数字。该行的“0”应为两个数字的宽度，因此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/
查看完整描述

3 回答

?
Smart猫小萌

TA贡献1911条经验 获得超7个赞

短分析

问题是，第1-3行有两个水平边距，第4行只有一个。

在水平边距为10 px的情况下，第4行的空闲空间比其他行多10 px。这就抛出了列的对齐。

因为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>

扩展分析

你写道：

看起来，Flexdiv中的内容会影响到它的计算大小。flex-grow财产。我做错什么了吗？

问题的根源不是FLEX项目中的内容。

你写道：

在下面提供的小提琴中，你会看到一个数字垫。除底部行外，所有行都包含3个数字。该行的“0”应为两个数字的宽度，因此flex-grow: 2和“：”是一个数字的大小，因此flex-grow: 1..我是不是漏掉了什么？

是。你对flex-grow属性不正确。flex-grow不用于定义FLEX项的大小。它的工作是在各个项目之间分配Flx容器中的空闲空间。

通过应用flex-grow: 1对于一组Flx项目，您告诉它们在它们之间平均分配空闲空间。这就是为什么在您的演示中，第1行、第2行和第3行具有相同大小的Flex项目。

当你申请flex-grow: 2，您正在告诉Flex项消耗的空闲空间是以下项的两倍flex-grow: 1.

但是，从上述因素到第4行布局的第二个10 px边距在哪里？

在第4行上取消对齐的原因是，第4行的空隙比其他行少一个，这意味着第4行的空闲空间比其他行多10 px。

你会注意到如果你删除保证金规则你得到了你想要的对齐。

.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>

那么，第四行到第二行10%的保证金又会发生什么呢？

它会被这两个挠性物品吸收。

以下是如何flex-grow分配第四行的额外空间：

  • 保留的Flex项(内容为“0”)

    flex-grow: 2. (.button#number0

    (在您的代码中。)
  • Flex项目权限(内容为“：”)

    flex-grow: 1. (.button#colon

    (在您的代码中。)
  • 第二个项间边距仅出现在包含三个FLEX项的行上，宽度为10 px。(代码在每个项目周围显示5 px，但在css中

    水平边缘永不塌陷

    ..此外，在柔性箱中，

    无边缘塌陷.)

  • 的总和

    flex-grow

    价值是三。让我们除以10 px乘以3，现在我们知道1的比例是3.33px。
  • 因此，左边的Flex项获得6.66px的额外空间，而Flex Item右侧的额外空间为3.33px。
  • 假设剩下的柔韧物品

    flex-grow: 3

    相反。然后，左边的FLEX项将得到7.5px，而FLEX项的右侧将得到2.5px。

你问题的最后一部分是：

“0”的右侧应与其上方的8、5和2对齐。有点不对劲。

因为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>

jsFiddle演示

参考资料：

额外：CSS网格解决方案

随着CSS网格的出现，整个布局的代码可以大大简化。

.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26%, 1fr));
  grid-gap: 10px;}#number0 {
  grid-column: span 2;}/* non-essential decorative styles */.button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid gray;}
<div class="numbers">
  <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 class="button number" id="number4">4</div>
  <div class="button number" id="number5">5</div>
  <div class="button number" id="number6">6</div>
  <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 class="button number" id="number0">0</div>
  <div class="button" id="colon">:</div></div>


查看完整回答
反对 回复 2019-07-11
?
叮当猫咪

TA贡献1776条经验 获得超12个赞

我认为迈克尔·B说的一切都是正确的。只有解决办法有点尴尬。我个人不喜欢卡卡。只是感觉不对劲。


你遇到的问题是一个更普遍的问题。你把太多的责任放在一个元素上。在这种情况下，.button班级，等级。弹性和保证金与弹性增长是太多的责任。试着把它拆开。它意味着更多的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>


查看完整回答
反对 回复 2019-07-11
  • 3 回答
  • 0 关注
  • 621 浏览

相关问题推荐

为什么字体颜色在Eclipse上没有变化
慕课专栏
更多

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信