Q
Version: 1.1.alpha.0

Demo: CSS3 Flexible Box

  • One really long element that should wrap. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Two
  • Three
  • Four
  • Five
  • Six
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • One
  • Two
  • Three
  • Four
  • Five
  • Six

Header Title

Another Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus.

Footer Title

<ul id='vertical-center'>
  <li>One really long element that should wrap.  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>
<ul id='flexible'>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>
<ul id='reorder'>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>
<section id='layout'>
  <header>
    <h1>Header Title</h1>
    <nav>
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </nav>
  </header>
  <article>
    <h1>Another Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus.</p>
  </article>
  <aside>
    <h1>Aside Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis.</p>
  </aside>
  <footer>
    <h1>Footer Title</h1>
  </footer>
</section>
%ul(id="vertical-center")
  %li One really long element that should wrap.  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  %li Two
  %li Three
  %li Four
  %li Five
  %li Six

%ul(id="flexible")
  %li One
  %li Two
  %li Three
  %li Four
  %li Five
  %li Six

%ul(id="reorder")
  %li One
  %li Two
  %li Three
  %li Four
  %li Five
  %li Six

%section(id="layout")
  %header
    %h1 Header Title

    %nav
      %ul
        %li One
        %li Two
        %li Three

  %article
    %h1 Another Title

    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus.

  %aside
    %h1 Aside Title

    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis.

  %footer
    %h1 Footer Title
@import "compass/css3";

#vertical-center {
  padding: 0;

  li {
    background: #CCC;
    width: 15em;
    margin: .5em;
    height: 5em;
    text-align: center;
    vertical-align: text-top;
    display: inline-block; /* non-flexbox browsers */
    @include display-flex(inline-flex);
    @include align-items(center);
    @include justify-content(center);
  }
}

#flexible {
  padding: 0;
  text-align: center;
  @include display-flex;
  @include flex-wrap(wrap);

  li {
    background: #CCC;
    min-width: 12em;
    margin: .5em;
    padding: .5em;
    display: inline-block; /* non-flexbox browsers */
    @include flex(1 0);
  }
}

#reorder {
  $flex-legacy-enabled: true;
  width: 100%; /* fix for old Firefox */
  @include display-flex;
  @include flex-direction(column);

  li:nth-child(even) {
    background: #CCC;
    @include order(1);
  }
  $flex-legacy-enabled: false;
}

#layout {
  @include display-flex;
  @include flex-wrap(wrap);

  header, footer {
    @include flex(1 0 100%);
  }

  header {
    background: lighten(yellow, 40%);
  }

  nav {
    $flex-legacy-enabled: true;
    ul {
      padding: 0;
      margin: -.5em;
      min-width: 100%; /* fix for old Firefox */
      @include display-flex(flex);
    }

    li {
      background: #CCC;
      margin: .5em;
      display: inline-block; /* non-flexbox browsers */
      @include flex(1 1 30%);
    }
    $flex-legacy-enabled: false;
  }

  article {
    @include flex(2 1 30em);
  }

  aside {
    flex: 1 0 15em;
    background: lighten(blue, 40%);
  }

  footer {
    background: lighten(green, 50%);
  }
}
@import compass/css3

#vertical-center
  padding: 0
  li
    background: #CCC
    width: 15em
    margin: .5em
    height: 5em
    text-align: center
    vertical-align: text-top
    display: inline-block
    /* non-flexbox browsers
    +display-flex(inline-flex)
    +align-items(center)
    +justify-content(center)

#flexible
  padding: 0
  text-align: center
  +display-flex
  +flex-wrap(wrap)
  li
    background: #CCC
    min-width: 12em
    margin: .5em
    padding: .5em
    display: inline-block
    /* non-flexbox browsers
    +flex(1 0)

#reorder
  $flex-legacy-enabled: true
  width: 100%
  /* fix for old Firefox
  +display-flex
  +flex-direction(column)
  li:nth-child(even)
    background: #CCC
    +order(1)
  $flex-legacy-enabled: false

#layout
  +display-flex
  +flex-wrap(wrap)
  header, footer
    +flex(1 0 100%)
  header
    background: lighten(yellow, 40%)
  nav
    $flex-legacy-enabled: true
    ul
      padding: 0
      margin: -.5em
      min-width: 100%
      /* fix for old Firefox
      +display-flex(flex)
    li
      background: #CCC
      margin: .5em
      display: inline-block
      /* non-flexbox browsers
      +flex(1 1 30%)
    $flex-legacy-enabled: false
  article
    +flex(2 1 30em)
  aside
    flex: 1 0 15em
    background: lighten(blue, 40%)
  footer
    background: lighten(green, 50%)
#vertical-center {
  padding: 0;
}
#vertical-center li {
  background: #cccccc;
  width: 15em;
  margin: 0.5em;
  height: 5em;
  text-align: center;
  vertical-align: text-top;
  display: inline-block;
  /* non-flexbox browsers */
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#flexible {
  padding: 0;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#flexible li {
  background: #cccccc;
  min-width: 12em;
  margin: 0.5em;
  padding: 0.5em;
  display: inline-block;
  /* non-flexbox browsers */
  -webkit-flex: 1 0;
  flex: 1 0;
}

#reorder {
  width: 100%;
  /* fix for old Firefox */
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#reorder li:nth-child(even) {
  background: #cccccc;
  -webkit-order: 1;
  order: 1;
}

#layout {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#layout header, #layout footer {
  -webkit-flex: 1 0 100%;
  flex: 1 0 100%;
}
#layout header {
  background: #ffffcc;
}
#layout nav ul {
  padding: 0;
  margin: -0.5em;
  min-width: 100%;
  /* fix for old Firefox */
  display: -webkit-flex;
  display: flex;
}
#layout nav li {
  background: #cccccc;
  margin: 0.5em;
  display: inline-block;
  /* non-flexbox browsers */
  -webkit-flex: 1 1 30%;
  flex: 1 1 30%;
}
#layout article {
  -webkit-flex: 2 1 30em;
  flex: 2 1 30em;
}
#layout aside {
  flex: 1 0 15em;
  background: #ccccff;
}
#layout footer {
  background: #80ff80;
}