Colunas responsivas apenas com Flexbox

O Flexbox é meio peculiar e novo agora, mas quando você começa a mergulhar, ele se torna muito divertido e você rapidamente percebe o quão poderoso é. Este é um caso de uso simples para Flexbox, colunas responsivas (sem consultas de mídia).

Este é o HTML que estamos usando:

<ul class="parent">
    <li>Column One</li>
    <li>Column Two</li>
    <li>Column Three</li>
</ul>

E o CSS se parece com isto:

.parent {
    display: flex;
    flex-wrap: wrap;
}
.parent li {
    flex: 1 1 320px;
    max-width: 500px;

Funciona assim:

1. Começamos dizendo aos pais para permitir que seus filhos se flexionem.
2. Dizemos ao pai para permitir que seus filhos se embrulhem.
3. Definimos o flexvalor das crianças como 1 1 320px. O importante é o 320px, que é basicamente um min-widthpara suas colunas.
4. Definimos a largura máxima para 500px.

Aqui está uma demonstração mostrando como isso em ação:

Veja a Caneta <a href=’ http://codepen.io/tjacobdesign/pen/yukHF/’> Easy #RWD Flexbox Columns </a> de Timothy Miller (<a href = ‘ http://codepen.io/ tjacobdesign ‘> @tjacobdesign </a>) em <a href=’ http://codepen.io’> CodePen </a>. </p>
<script async src = “// codepen.io/assets/embed /ei.js “> </script>

Observe, sem consultas de mídia! Apenas a magia do Flexbox.

Para mais informações sobre o Flexbox, sugiro fortemente o guia completo de Chris Coyier . Também escrevi um pouco mais sobre o Flexbox na minha House of Unicorns .