¿Cómo puedo mostrar tres columnas por fila?

Question

¿Cómo puedo mostrar tres columnas por fila?

He estado tratando de mostrar tres columnas por fila. ¿Es posible usar flexbox?

Mi CSS actual es algo como esto:

.mainDiv {
    display: flex;
    margin-left: 221px;
    margin-top: 43px;
}

Este código pone todo el contenido en una sola fila. Quiero agregar una restricción a solo muestra tres registros por fila.

36

css html html5 css3 flexbox

Author: Sunil Garg, 2014-06-13

Source

1 answers

score 71 · Accepted Answer

Esto puede ser lo que estás buscando:

Http://jsfiddle.net/L4L67 /

body>div {
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}

body>div>div {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}

body>div>div:nth-child(even) {
  background: #23a;
}

body>div>div:nth-child(odd) {
  background: #49b;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>