ayuda cajas flexibles

[franfis]

hola amigos, estoy tratando de hacer lo de este video http://www.youtube.com/watch?v=iTEgQP87IhQ&list=EC081AC329706B2953, que es meter dentro de una caja 4 cajas cada uno con su respectivo color de fondo, etc,etc.

Código [Seleccionar] Expandir


#cajamadre{
border:2px solid blue;
display:-webkit-flex;
-webkit-box-orient: horizontal;


}
#caja1{
border: 2px solid red;
background: blue;
-webkit-flex: 1;
padding:20px;
margin: 10px;
}
#caja2{
border: 2px solid red;
background: red;
padding:20px;
margin: 10px;
}



Tal como esta en el video no me funciona, ya que el código yá es antiguo (2011, que loco), en el video le pone a la caja madre la propiedad display:-webkit-box; y nada en la caja hija. Pero segun leí ahora se pone display:-webkit-flex; en la caja madre y -webkit-flex: 1; en la caja hija, así lo puse en el código de arriba.

el html es un section id="cajamadre" y las demas cajas son del tipo div id="caja1"

pregunta: Por que no me hace caso cuando pongo -webkit-box-orient: vertical; en vez de horizontal, y por que todas las cajas solo le siguen los cambios a la primera caja, no tienen comportamiento independiente??color borde,etc.

Gracias por leer todo este rollo... haa me olvidaba uso chrome

[#!drvy]

Hola

display:-webkit-flex; Esta mal.

#cajamadre{
   border:2px solid blue;
   display:-webkit-box;
   -webkit-box-orient: horizontal;
}

Luego para hacerlos flexibles utilizas en cada elemento.
-webkit-box-flex:valor;

Si los quieres verticales, no hace falta mas que cambies el box-orient en la caja madre.
-webkit-box-orient:vertical;

http://www.w3schools.com/cssref/css3_pr_box-flex.asp


PD: Almenos, así es como funciona actualmente en webkit.

Al parecer box se considera obsoleto pero sigue implementado xD. Asi que si, el uso de flex es el recomendado. A la pregunta de:

pregunta: Por que no me hace caso cuando pongo -webkit-box-orient: vertical; en vez de horizontal, y por que todas las cajas solo le siguen los cambios a la primera caja, no tienen comportamiento independiente??color borde,etc.

Puesto que box es una propiedad de display:box; esta deja de funcionar. Para poner las cajas verticalemente se usa webkit-flex-direction: column;

Código (css) [Seleccionar] Expandir

#cajamadre{
width:300px;
height:100px;

display:-webkit-flex;
-webkit-flex-direction: column;
}

http://weblog.bocoup.com/dive-into-flexbox/

Saludos

[franfis]

Gracias, http://www.emenia.es/flexbox-la-caja-flexible-css3/ alli explica lo que buscaba, tenias razon.

A diferencia a lo que intentaba, las cajas interiores los pone en una clase. 

saludos.