Flex experimental

by Alex

HTML

<div class="c"></div>
<div class="flex-container">
  <div class="flex-item flex1">1</div>
  <div class="flex-item flex2">2</div>
</div>

CSS

html {
    font-family: sans-serif;
}
body {
    margin: 0;
}
.flex-container {
  display: flex;
}

.flex-item {
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  box-sizing: border-box;
}

.flex1 {
    flex: 2 0 100px;
}
.flex2 {
    flex: 1 0 100px;
}

JavaScript

$(window).on({
    resize : function() {
        var $flex1 = $('.flex1'),
            $flex2 = $('.flex2'),
            $flexContainer = $('.flex-container'),
            $c = $('.c'),
            cw = $flexContainer.outerWidth(),
            f1 = $flex1.outerWidth(),
            f2 = $flex2.outerWidth();
        $c.html('[ContainerWidth:] ' + cw + '; [Flex1/Flex2:] ' + (f1 / f2));
        $flex1.html($flex1.outerWidth() + 'px - ' + (f1/cw*100).toFixed(2) + '%');
        $flex2.html($flex2.outerWidth() + 'px - ' + (f2/cw*100).toFixed(2) + '%');
    }
});