CSS flex-box

css-flex-box.markdown

CSS flex-box

A Pen by Daniel W. Crompton on CodePen.

License.

index.haml

.h2
  Playing with css flex-box (
  %i
    %a(href='http://css-tricks.com/snippets/css/a-guide-to-flexbox/')
      look here
  )
.div  
.tab
  .col-wrap-4x4
    .col-1x1 1
    .col-1x1 2
    .col-1x1 3
    .col-1x1 4
  .col-rev-wrap-4x4
    .col-1x1 1
    .col-1x1 2
    .col-1x1 3
    .col-1x1 4
  .row-wrap-4x4
    .row-1x1 1
    .row-1x1 2
    .row-1x1 3
    .row-1x1 4
  .row-reverse-wrap-4x4
    .row-1x1 1
    .row-1x1 2
    .row-1x1 3
    .row-1x1 4

style.scss

.tab {
  width: 500px;
  height: 100px;
  display: flex;
  flex-flow: column wrap-reverse;
  color: green;
}

.col-wrap-4x4 {
  width: 85px;
  height: 85px;
  display: flex;
  flex-flow: column wrap;
}
.col-rev-wrap-4x4 {
  width: 85px;
  height: 85px;
  display: flex;
  flex-flow: column-reverse wrap;
}
.col-1x1 {
  background-color: black;  
  border: solid 1px green;
  width: 40px;
  height: 40px;
}

.row-wrap-4x4 {
  width: 85px;
  height: 85px;
  display: flex;
  flex-flow: row wrap;
}
.row-reverse-wrap-4x4 {
  width: 85px;
  height: 85px;
  display: flex;
  flex-flow: row-reverse wrap;
}
.row-1x1 {
  background-color: black;  
  border: solid 1px green;
  width: 40px;
  height: 40px;
}