index.html

---
template: home.html
---

<section class="Section">
  <div class="Container">
    <h2 class="Section-heading">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 the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.</p>
    <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>
  </div>
</section>

<section class="Section">
  <div class="Container">
    <h2 class="Section-heading">Showcase</h2>
    <ul class="Grid Grid--guttersLg">
      {% for demo in site.demos %}
        <li class="Grid-cell u-full u-med-1of2 u-large-1of3">
          <div class="Feature">
            <a href="{{ site.baseUrl }}demos/{{ demo.slug }}/">
              <figure class="Feature-figure">
                <img class="Feature-image" alt="{{ demo.title }}" src="{{ site.baseUrl }}images/{{ demo.slug }}.jpg">
              </figure>
              <h3 class="Feature-title">{{ demo.title }}</h3>
            </a>
            <p class="Feature-description">{{ demo.excerpt }}</p>
          </div>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

<section class="Section">
  <div class="Container">
    <h2 class="Section-heading">Browser Support</h2>

    <ul class="Grid Grid--guttersLg Grid--justifyCenter">
      <li class="Grid-cell Grid-cell--autoSize">
        <div class="Browser Browser--chrome" title="Since 2012-07-31">
          <figure class="Browser-image"></figure>
          Chrome<br>21+
        </div>
      </li>
      <li class="Grid-cell Grid-cell--autoSize">
        <div class="Browser Browser--opera" title="Since 2012-11-05">
          <figure class="Browser-image"></figure>
          Opera<br>12.1+
        </div>
      </li>
      <li class="Grid-cell Grid-cell--autoSize">
        <div class="Browser Browser--firefox" title="Since 2013-06-25">
          <figure class="Browser-image"></figure>
          Firefox<br>22+
        </div>
      </li>
      <li class="Grid-cell Grid-cell--autoSize">
        <div class="Browser Browser--safari" title="Since 2013-06-11">
          <figure class="Browser-image"></figure>
          Safari<br>6.1+
        </div>
      </li>
      <li class="Grid-cell Grid-cell--autoSize">
        <div class="Browser Browser--ie" title="Since 2012-09-04">
          <figure class="Browser-image"></figure>
          IE<br>10+
        </div>
      </li>
    </ul>

    <h3 class="Section-heading">Caveats and Known Issues</h3>
    <ul class="Section-list">
      <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 27 and earlier do 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>
  </div>
</section>

<section class="Section">
  <div class="Container">
    <h2 class="Section-heading">About the Code</h2>
    <p>All of the code samples on this site show how to solve a particular design problem with Flexbox. They show just the code that's needed to make the demos work in a spec-compliant browser. Some browsers do not fully comply with the latest version of the spec, so sadly, a few workarounds were necessary.</p>
    <p>Workarounds for non-compliant browsers are not shown in the code samples, but if you're curious about those implementation details, you can check out the source files. Each demo links to its source, and all browser-specific workarounds are well-documented, so don't be afraid to take a look.</p>
    <p>The vendor prefixing and translating of current flex properties to their legacy equivalents is all handled by <a href="https://github.com/ai/autoprefixer">autoprefixer</a>. If you're writing Flexbox code and not using autoprefixer, well, you're making a horrible mistake.</p>
    <p>The class naming convention used in the code samples and source files is taken from <a href="https://github.com/suitcss/suit">SUIT CSS</a>, which is based on BEM methodologies. Each example includes one or more reusable CSS components allowing you to adapt or copy these patterns in to your own projects. Links are provided to their respective components on each example page.</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>