GJEdqa

GJEdqa.markdown

GJEdqa

Forked from Captain Anonymous's Pen VLWxjV.

A Pen by Betsy on CodePen.

License.

index.html

<ul class="d-flex d-ex1">
  <li class="col-12">
    <h2>800px</h2>
    <p>12 / 0 / 0</p>
  </li>
</ul>
<ul class="d-flex d-ex3">
  <li class="col-3">
    3 / 0 / 0;
  </li>
  <li class="col-3">
    3 / 0 / 0;
  </li>
  <li class="col-3">
    3 / 0 / 0;
  </li>
  <li class="col-1">
    1 / 0 / 0;
  </li>
  <li class="col-1">
    1 / 0 / 0;
  </li>
  <li class="col-1">
    1 / 0 / 0;
  </li>
</ul>
<ul class="d-flex d-ex3">
  <li class="col-4">
    4 / 0 / 0;
  </li>
  <li class="col-4">
    4 / 0 / 0;
  </li>
  <li class="col-2">
    2 / 0 / 0;
  </li>
  <li class="col-2">
    2 / 0 / 0;
  </li>
</ul>

script.js

$(document).ready(function() {
  var columns = $('.d-flex li');
  columns.append(function() {
    return '<p>Width: ' + $(this).innerWidth() + 'px</p>'
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/* A proof that flexbox grow values cannot be used for grid columns */

.d-flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-left: 1px solid black;
  width: 800px;
  padding:0;
}

.d-flex li {
  box-sizing: border-box;
  border: 1px solid black;
  border-left:0;
  list-style:none;
  padding: 10px;
}
.col-12 {
  flex: 12 0 0%;
}
.col-4 {
  flex: 3 0 0%;
}
.col-3 {
  flex: 3 0 0%;
}

.col-2 {
  flex: 2 0 0%;
}

.col-1 {
  flex: 1 0 0%;
}