elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ayuda cajas flexibles
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ayuda cajas flexibles  (Leído 1,446 veces)
franfis

Desconectado Desconectado

Mensajes: 245



Ver Perfil
ayuda cajas flexibles
« en: 7 Mayo 2013, 00:55 am »

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:
#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


« Última modificación: 7 Mayo 2013, 01:00 am por franfis » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: ayuda cajas flexibles
« Respuesta #1 en: 8 Mayo 2013, 15:41 pm »

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:
Citar
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
  1. #cajamadre{
  2. width:300px;
  3. height:100px;
  4.  
  5. display:-webkit-flex;
  6. -webkit-flex-direction: column;
  7. }

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

Saludos


« Última modificación: 8 Mayo 2013, 16:03 pm por drvy | BSM » En línea

franfis

Desconectado Desconectado

Mensajes: 245



Ver Perfil
Re: ayuda cajas flexibles
« Respuesta #2 en: 9 Mayo 2013, 00:02 am »

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.  ;D

saludos.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines