¿Cómo puedo implementar un flexbox multilínea?

A pesar de mi búsqueda en Google, he encontrado pocos ejemplos sobre cómo implementar flexboxes de múltiples líneas. Nada del código que he obtenido de los ejemplos ha funcionado. Tengo tres elementos dentro de un flexbox y quiero que el primero esté en la parte superior y el segundo y el tercero en la fila inferior.

<div class="flexbox">
  <div id="element1">element 1</div>
  <div id="element2">element 2</div>
  <div id="element3">element 3</div>
</div>

He intentado usar estas propiedades: 

.flexbox {
  width: 300px;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-lines: multiple;
  flex-wrap: wrap;
}

#element1 {
  width: 100%;
}

Y dándole un ancho establecido, pero aún así no se ajustará, incluso si el primer elemento tiene un ancho del 100%. ¿Me faltan ciertos prefijos de proveedor o es mi sintaxis mal?

Author: Gael, 2012-10-02
Source

2 answers

La especificación de flex box ha cambiado en los últimos meses y está utilizando la sintaxis antigua. La nueva especificación creo que solo se implementa actualmente solo en Chrome Canary y, en cierta medida, en la última chrome. (Es un poco buggy) box-lines multiple se ha ido así que para lograr este diseño vertical hay algunas maneras. Usando-webkit-flex-direction: column; so 

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
</div>

Y css: 

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    width: 500px;
    height: auto;
    min-height: 200px;
}

#flexbox .box {
    -webkit-flex: 1;

}

Usando envoltura: 

-webkit-flex-wrap: wrap;

Y estableciendo su dirección a: 

-webkit-flex-direction: row;

So 

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
    <div class="box">DIV 4</div>
    <div class="box bigger">DIV 5</div>
    <div class="box">DIV 6</div>
</div>

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    width: 500px;
    height: auto;
    min-height: 200px;
    }

#flexbox .box {

    -webkit-flex: 130px 1;

    }

#flexbox .box.bigger {

    -webkit-flex: 330px 1;

    }

Hay un montón de ejemplos en la página de especificaciones enlazada arriba.

 23
Author: Rob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-02 20:27:58

Utilice el atributo flex-direction.

.container { flex-direction: row | row-reverse | column | column-reverse; }

Consulte el artículo fluido : http://fend-tricks.com/flexbox-intro /

 0
Author: Jayampathy Wijesena,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-30 11:27:36