flex-grow transition with decimal number

Question

I have set the justice-content as flex-end;

normal one:

.bar flex-grow 0 -> 40
.filler flex-grow 100 -> 60

the bar grows toward top.

decimal one:

.bar flex-grow 0 -> 0.4
.filler flex-grow 1 -> 0.6

the bar grows toward bottom.

As I know the default flex-grow number is 0,

Does it break the flex-end?

I can't understand the decimal number behaviour.

Does anyone can explain it?

Thanks!

$(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>

You're right. There's a difference in behavior between the integer and decimal equivalents. So why not stick to integers? Why do you need to use decimals? — Michael Benjamin, Mar 23 '16 at 10:55
@Michael_B actually, I used decimals at first time for I'm so lazy that I don't wanna change the percentage value. And I found out the "wired" behaviour... But I can't finger out why, so I post the question here hoping someone can explain it. — soooooot, Mar 23 '16 at 12:30
Yeah, it's an interesting question. Can't see any reason for the difference. You may want to check across browsers for consistency. But for all practical purposes, integers should be sufficient for `flex-grow`. — Michael Benjamin, Mar 23 '16 at 12:34

flex-grow transition with decimal number

normal one:

decimal one:

0 Answers0