Skip to content

Instantly share code, notes, and snippets.

@jasesmith

jasesmith/FlexboxWrapColumnAlignment.md

Last active August 29, 2015 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jasesmith/1739685255c68c0267a3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jasesmith/1739685255c68c0267a3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jasesmith renamed this gist Dec 3, 2014. 1 changed file with 0 additions and 0 deletions.
    0 Flexbox-wrap-column-alignment.markdown → FlexboxWrapColumnAlignment.md
    View file
    File renamed without changes.
  2. jasesmith revised this gist Oct 8, 2014. 2 changed files with 4 additions and 3 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,11 +7,11 @@
    <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>
    <li></li>
    <li></li>

    </ul>
    3 changes: 2 additions & 1 deletion style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@ ul {
    }

    li {
    flex: 1 0 10em;
    flex: 1 0 12em;
    box-shadow: -1px -1px 0 0 darken(yellow, 10%);
    transition: all .3s;
    div {
    @@ -23,6 +23,7 @@ li {
    }

    // ghost tiles
    // uncomment properties to make these invisible
    &:empty {
    // height: 0;
    // box-shadow: none;
  3. jasesmith revised this gist Oct 8, 2014. No changes.
  4. jasesmith created this gist Oct 8, 2014.
    9 changes: 9 additions & 0 deletions Flexbox-wrap-column-alignment.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    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](http://codepen.io/dalgard/)'s Pen [Flexbox inner border and column alignment](http://codepen.io/dalgard/pen/Dbnus/).

    A [Pen](http://codepen.io/jasesmith/pen/zLABu) by [Jase Smith](http://codepen.io/jasesmith) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/jasesmith/pen/zLABu/license).
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <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>

    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    37 changes: 37 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    @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 10em;
    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
    &:empty {
    // height: 0;
    // box-shadow: none;
    }
    }


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