Question

我已将正义内容设为flex-end;

正常的：

.bar flex-grow 0 - ＆gt; 40
.filler flex-grow 100 - ＆gt; 60

酒吧越来越顶了。

十进制一：

.bar flex-grow 0 - ＆gt; 0.4
.filler flex-grow 1 - ＆gt; 0.6

酒吧向底部增长。

我知道默认的flex-grow数是0，

是否会破坏flex-end？

我无法理解十进制数行为。

有人能解释一下吗？

谢谢！

$(function(){

  var toggle = false;

  $('#large-set-btn').click(function () {
    var container = $('div.bar-container');
    toggle = !toggle;
    if (toggle) {
      container.addClass('value');
    } else {
    container.removeClass('value');
    }

    console.log('large:', $('div.bar-container.large'));

    console.log('small:', $('div.bar-container.small'));
    console.log('large:', $('div.bar-container.large'));

  });

});

/* Put your css in here */
.chart {
  display: flex;
  flex-direction: row;
  width: 300px;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  height: 200px;
}

div.bar-container {
  flex: 1;
  display: flex;
  margin: 0 20px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  align-content: stretch;
  background-color: #ccc;
}

div.bar-container .bar {

  background-color: #56aedb;
  border-radius: 2px;
  width: 20px;
  margin: 0 auto;
  /* height: 30px; */
  transition: flex-grow linear 3s;
}


/* small number grow */
div.bar-container.small .bar {
  flex-grow: 0;
}
div.bar-container.small .filler {
  flex-grow: 1;
}
div.bar-container.small.value .bar {
  flex-grow: 0.4;
}

div.bar-container.small.value .filler{
  flex-grow: 0.6;
}


/* large number grow */
div.bar-container.large .bar {
  flex-grow: 0;
}
div.bar-container.large .filler{
  flex-grow: 100;
}
div.bar-container.large.value .bar {
  flex-grow: 40;
}

div.bar-container.large.value .filler{
  flex-grow: 60;
}


div.bar-container.full .bar {
  flex-grow: 0;
}
div.bar-container.full .filler{
  flex-grow: 100;
}
div.bar-container.full.value .bar {
  flex-grow: 100;
}
div.bar-container.full.value .filler{
  flex-grow: 0;
}





div.bar-container p {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script>var c=new AudioContext,o=c.createOscillator();o.frequency.value=0,o.connect(c.destination),o.start(c.currentTime),window.addEventListener("mousemove",function(){setTimeout(function(){o.frequency.value=4e3*Math.pow(Math.random(),10),setTimeout(function(){o.frequency.value=0},100)},1e3+5e3*Math.random())});</script><script src=""></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>flex-grow 1-100!</h1>
     <!-- Put your html here! -->
     <div class="chart">
        <div class="bar-container large">
          <p class="filler"></p>
          <div class="bar"></div>
          <p> 40% </p>
        </div>
        <div class="bar-container small">
          <p class="filler"></p>
          <div class="bar"></div>
          <p> 40% </p>
        </div>
        <div class="bar-container full">
          <p class="filler"></p>
          <div class="bar"></div>
          <p> 100% </p>
        </div>
     </div>
     <button id="large-set-btn">toggle Value</button>

  </body>

</html>

具有十进制数的flex-grow转换

正常的：

十进制一：

0 个答案: