html - grow - flexbox guia

css3 flexbox limit 4 elementos por fila de ancho automático

Question

¿Cómo puedo lograr esto usando flexbox? Actualmente, estoy usando la tabla, pero envuelvo cada fila en un div para limitarlo a 5 elementos solamente. Quiero que todos los artículos se envuelvan solo en uno de los padres.

Intenté Flexbox, pero quiero que el ancho de los artículos dependa de su contenido. Gracias chicos.

.flexContainer {
  display: flex;
  flex-flow: row wrap;
 }
 .flexContainer .item {
  padding: 5px;
  flex: 1 1 auto;
 }
 .flexContainer .item a {
  display: block;
  background: blue;
  text-align: center;
 }

<div class="flexContainer">
 <div class="item"><a href="">sdfsf</a></div>
 <div class="item"><a href="">dffdfdf</a></div>
 <div class="item"><a href="">fdfdfd</a></div>
 <div class="item"><a href="">fdfdgdf</a></div>
 <div class="item"><a href="">ffffffffff</a></div>
 <div class="item"><a href="">fdfdfdg</a></div>
 <div class="item"><a href="">dddddddddddddd</a></div>
 <div class="item"><a href="">fdfdfdsd</a></div>
 <div class="item"><a href="">dsds</a></div>
 <div class="item"><a href="">dffdfdfdsf</a></div>
 <div class="item"><a href="">dffdfdfsdsds</a></div>
 <div class="item"><a href="">dffdfdfssdsfd</a></div>
 <div class="item"><a href="">dfsddfdfdf</a></div>
 <div class="item"><a href="">dff</a></div>
 <div class="item"><a href="">dffdfdfdffdfdfdffdfdf</a></div>
</div>

Answer 1

A juzgar por este informe https://antibland.github.io/front-end/project_files/css/flexbox_max_items_per_row.html , parece que podría hacer lo siguiente en su css:

CSS:

* {
  box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}

.flexContainer .item {
  padding: 5px;
  flex: 1 1 20%;
}

Y esto lograría el efecto deseado.

    
    * {
        box-sizing: border-box;
    }

    .flexContainer {
  display: flex;
  flex-wrap: wrap;
 }
 .flexContainer .item {
  padding: 5px;
  flex: 1 1 20%;
 }
 .flexContainer .item a {
  display: block;
  background: blue;
  text-align: center;
 }

<div class="flexContainer">
 <div class="item"><a href="">sdfsf</a></div>
 <div class="item"><a href="">dffdfdf</a></div>
 <div class="item"><a href="">fdfdfd</a></div>
 <div class="item"><a href="">fdfdgdf</a></div>
 <div class="item"><a href="">ffffffffff</a></div>
 <div class="item"><a href="">fdfdfdg</a></div>
 <div class="item"><a href="">dddddddddddddd</a></div>
 <div class="item"><a href="">fdfdfdsd</a></div>
 <div class="item"><a href="">dsds</a></div>
 <div class="item"><a href="">dffdfdfdsf</a></div>
 <div class="item"><a href="">dffdfdfsdsds</a></div>
 <div class="item"><a href="">dffdfdfssdsfd</a></div>
 <div class="item"><a href="">dfsddfdfdf</a></div>
 <div class="item"><a href="">dff</a></div>
 <div class="item"><a href="">dffdfdfdffdfdfdffdfdf</a></div>
</div>

EDICIÓN 14-JULIO-2017 0829 UTC

Para mostrar un poco mejor el límite de 5 por fila con este método, pero aún controlado por el ancho de su contenido:

    
    * {
        box-sizing: border-box;
    }

    .flexContainer {
  display: flex;
  flex-wrap: wrap;
 }
 .flexContainer .item {
  padding: 5px;
  flex: 1 1 20%;
 }
 .flexContainer .item a {
  display: block;
  background: blue;
  text-align: center;
 }

<div class="flexContainer">
 <div class="item"><a href="">we''re short</a></div>
 <div class="item"><a href="">we''re short</a></div>
 <div class="item"><a href="">we''re short</a></div>
 <div class="item"><a href="">we''re short</a></div>
 <div class="item"><a href="">we''re short</a></div>
 <div class="item"><a href="">we are a bit bigger</a></div>
 <div class="item"><a href="">we are a bit bigger</a></div>
 <div class="item"><a href="">we are a bit bigger</a></div>
 <div class="item"><a href="">we are a bit bigger</a></div>
 <div class="item"><a href="">we are quite a bit bigger</a></div>
 <div class="item"><a href="">we are quite a bit bigger</a></div>
 <div class="item"><a href="">we are quite a bit bigger</a></div>
 <div class="item"><a href="">we are the biggest divs yet</a></div>
 <div class="item"><a href="">we are the biggest divs yet</a></div>
 <div class="item"><a href="">I am the daddy of all the divs on this page.</a></div>
</div>