Sistema de rejilla infinita basado en CSS Flexbox-Flex One

Vista prévia

Descripción

Flex One es una clase CSS simple muerta para crear sistemas de rejilla receptivos infinitos basados en el diseño de Flexbox CSS.

Funcionamiento

Crear el HTML FO el sistema de ciñe.

<div class="column">

<div class="column">


<div class="row">50%</div>


<div class="row">50%</div>

</div>


<div class="column">


<div class="row">33,3%</div>


<div class="row">33,3%</div>


<div class="row">33,3%</div>

</div>


<div class="column">


<div class="row">25%</div>


<div class="row">25%</div>


<div class="row">25%</div>


<div class="row">25%</div>

</div>


<div class="column">


<div class="row">20%</div>


<div class="row">20%</div>


<div class="row">20%</div>


<div class="row">20%</div>


<div class="row">20%</div>

</div>


<div class="column">


<div class="row">16,66%</div>


<div class="row">16,66%</div>


<div class="row">16,66%</div>


<div class="row">16,66%</div>


<div class="row">16,66%</div>


<div class="row">16,66%</div>

</div>


<div class="column">


<div class="row">12,5%</div>


<div class="row">12,5%</div>


<div class="row">12,5%</div>


<div class="row">12,5%</div>


<div class="row">12,5%</div>


<div class="row">12,5%</div>


<div class="row">12,5%</div>


<div class="row">12,5%</div>

</div>
</div>

Agregue el CSS necesario a las filas.

.row{ flex:1 }