index.html

---
layout: default
title: Home
---

<main class="Site-content">

  <section class="Section Container">
    <h2 class="PromoHeading">Introduction</h2>
    <p>CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.</p>
    <p>Finally, thanks to <a href="http://www.w3.org/TR/css3-flexbox/">Flexbox</a>, we have a solution.</p>
    <p>This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with Internet Explorer 11 and Safari 6.1 now in beta, Flexbox will soon be supported in every modern browser.
    <p>Check out the demos below. View the styles in the Web inspector or dive into <a href="https://github.com/philipwalton/solved-by-flexbox">the source</a> to see just how easy CSS layout will become once Flexbox becomes mainstream.</p>
  </section>

  <section class="Section Section--striped">
    <div class="Container">
      <h2 class="PromoHeading">Showcase</h2>
      <ul class="Grid Grid--guttersLarge Grid--ffMultilineSupport large-Grid--gutters2x">
        <li class="Grid-cell u-full u-med-1of2 u-large-1of3">
          <div class="Feature">
            <a href="{{ '/demos/grids/' | absolute }}">
              <figure class="Feature-figure">
                <img class="Feature-image" alt="Better, Simpler Grids" src="{{ '/images/grids.jpg' | absolute }}">
              </figure>
              <h3 class="Feature-title">Better, Simpler Grids</h3>
            </a>
            <p class="Feature-description">Flexbox gives us most of the features we want from a grid system out of the box. And sizing and alignment are just one or two properties away.</p>
          </div>
        <li class="Grid-cell u-full u-med-1of2 u-large-1of3">
          <div class="Feature">
            <a href="{{ '/demos/media-object/' | absolute }}">
              <figure class="Feature-figure">
                <img class="Feature-image" alt="Media Object" src="{{ '/images/media-object.jpg' | absolute }}">
              </figure>
              <h3 class="Feature-title">The Media Object</h3>
            </a>
            <p class="Feature-description">Create media objects with fixed or varying figure sizes without worrying about overflow, clearfixing, or block formatting context hacks.</p>
          </div>
        <li class="Grid-cell u-full u-med-1of2 u-large-1of3">
          <div class="Feature">
            <a href="{{ '/demos/input-add-ons/' | absolute }}">
              <figure class="Feature-figure">
                <img class="Feature-image" alt="Input Add-ons" src="{{ '/images/input-add-on.jpg' | absolute }}">
              </figure>
              <h3 class="Feature-title">Input Add-ons</h3>
            </a>
            <p class="Feature-description">Creating full-width, fluid input/button pairs has been impossible for most of the history of CSS. With Flexbox it couldn't be easier.</p>
          </div>
        <li class="Grid-cell u-full u-med-1of2 u-large-1of3">
          <div class="Feature">
            <a href="{{ '/demos/sticky-footer/' | absolute }}">
              <figure class="Feature-figure">
                <img class="Feature-image" alt="Sticky Footer" src="{{ '/images/sticky-footer.jpg' | absolute }}">
              </figure>
              <h3 class="Feature-title">Sticky Footer</h3>
            </a>
            <p class="Feature-description">Getting your footer to stick to the bottom of sparsely contented pages has always been tricky. And if the footer's height is unknown, it's basically impossible. Not so anymore.</p>
          </div>

        <li class="Grid-cell u-full u-med-1of2 u-large-1of3">
          <div class="Feature">
            <a href="{{ '/demos/holy-grail/' | absolute }}">
              <figure class="Feature-figure">
                <img class="Feature-image" alt="Holy Grail Layout" src="{{ '/images/holy-grail.jpg' | absolute }}">
              </figure>
              <h3 class="Feature-title">Holy Grail Layout</h3>
            </a>
            <p class="Feature-description">This classic problem has been challenging CSS hackers for years, yet none of the historical solutions have fully solved it. With Flexbox, it's finally possible.</p>
          </div>
        <li class="Grid-cell u-full u-med-1of2 u-large-1of3">
          <div class="Feature">
            <a href="{{ '/demos/vertical-centering/' | absolute }}">
              <figure class="Feature-figure">
                <img class="Feature-image" alt="Vertical Centering" src="{{ '/images/vertical-centering.jpg' | absolute }}">
              </figure>
              <h3 class="Feature-title">Vertical Centering</h3>
            </a>
            <p class="Feature-description">A lack of proper vertical centering has been the butt of almost every CSS joke ever told. While it's technically always been mostly possible, it's never been very intuitive &mdash; until now.</p>
          </div>
      </ul>
    </div>
  </section>

  <section class="Section Container">
    <h2 class="PromoHeading">Flexbox Browser Support</h2>
    <ul class="BrowserMatrix">
      <li class="BrowserMatrix-item">
        <span class="BrowserLogo BrowserLogo--chrome"></span>
        <p class="BrowserMatrix-title">Chrome</p>
        <p class="BrowserMatrix-description">21+</p>
      <li class="BrowserMatrix-item">
        <span class="BrowserLogo BrowserLogo--opera"></span>
        <p class="BrowserMatrix-title">Opera</p>
        <p class="BrowserMatrix-description">12.1+</p>
      <li class="BrowserMatrix-item">
        <span class="BrowserLogo BrowserLogo--firefox"></span>
        <p class="BrowserMatrix-title">Firefox</p>
        <p class="BrowserMatrix-description">22+</p>
      <li class="BrowserMatrix-item">
        <span class="BrowserLogo BrowserLogo--ie"></span>
        <p class="BrowserMatrix-title">IE</p>
        <p class="BrowserMatrix-description">11+ <em>(beta)</em></p>
      <li class="BrowserMatrix-item">
        <span class="BrowserLogo BrowserLogo--safari"></span>
        <p class="BrowserMatrix-title">Safari</p>
        <p class="BrowserMatrix-description">6.1+ <em>(beta)</em></p>
    </ul>

    <h3 class="PromoSubheading">Caveats and Known Issues</h3>
    <ul class="List List--centered">
      <li>IE 10 has Flexbox support but for a <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">draft version</a> of the current spec: (<code>display:flexbox</code>).</li>
      <li>Safari 6 and earlier support the <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">original</a> Flexbox syntax, which is now obsolete: (<code>display:box</code>).</li>
      <li>Firefox does not support multi-line flexboxes. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=702508">this bug</a> for more details.</li>
      <li>For a full browser support comparison, check out <a href="http://caniuse.com/flexbox">caniuse.com/flexbox</a></li>
    </ul>
  </section>

  <section class="Section Section--striped Section--last">
    <div class="Container">
      <h2 class="PromoHeading">About the Code</h2>

      <p>In addition to showcasing the power of Flexbox, this site also aims to be an example of modern CSS design and architectural practices. Namely modular, reusable style rules built on a predictable and testable naming convention.</p>

      <p>All of the CSS code in these examples make use of the <a href="https://github.com/suitcss/suit">SUIT</a> naming conventions developed by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> and are based on OOCSS and BEM methodologies. Each example includes one or more reuseable CSS components allowing you to adapt or copy these patterns in to your own projects. Links are provided to the respective components on each example page.</p>

      <p>This site also uses the excellent <a href="https://github.com/ai/autoprefixer">autoprefixer</a> library by <a href="http://sitnik.ru">Andrey Sitnik</a>, which takes care of vendor prefixing the CSS, so you don't have to think about it.</p>

      <p>If you find a mistake or would like to suggest an additional example, feel free to open an issue or submit a pull request on <a href="https://github.com/philipwalton/solved-by-flexbox">Github</a>.</p>

    </div>
  </section>

</main>