hola amigos, estoy tratando de hacer lo de este video http://www.youtube.com/watch?v=iTEgQP87IhQ&list=EC081AC329706B2953 (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.
#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
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:
Citarpregunta: 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;
#cajamadre{
width:300px;
height:100px;
display:-webkit-flex;
-webkit-flex-direction: column;
}http://weblog.bocoup.com/dive-into-flexbox/
Saludos
Gracias, http://www.emenia.es/flexbox-la-caja-flexible-css3/ (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. ;D
saludos.