FlexboxWrapColumnAlignment.md

Flexbox wrap column alignment

Fixed size tiles inside flexbox cells while maintaining tile alignment by inserting extra :empty ghost tiles (dirty technique, extraneous DOM elements) — known issue: if there's not enough real tiles to fill the first flex row then the ghost tiles have a presence.

Forked from Kristian Dalgård's Pen Flexbox inner border and column alignment.

A Pen by Jase Smith on CodePen.

License.

index.html

<ul>
  <li><div>1</div></li>
  <li><div>2</div></li>
  <li><div>3</div></li>
  <li><div>4</div></li>
  <li><div>5</div></li>
  <li><div>6</div></li>
  <li><div>7</div></li>

  <!-- works with 2 less than real tiles -->
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

</ul>

style.scss

@import "compass/css3";
ul {
  display: flex;
  flex-wrap: wrap;
  background-color: yellow;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

li {
  flex: 1 0 12em;
  box-shadow: -1px -1px 0 0 darken(yellow, 10%);
  transition: all .3s;
  div {
    width: 8em;
    height: 10em;
    padding: 1em;
    margin: 2em auto;
    box-shadow: 0 0 0 1px inset;
    background-color: deeppink;
  }

  // ghost tiles
  // uncomment properties to make these invisible
  &:empty {
    // height: 0;
    // box-shadow: none;
  }
}


*,
:before,
:after {
  box-sizing: border-box;
}