Inicio > Desarrollo web, Uncategorized > Diseño responsive con Flexbox

Diseño responsive con Flexbox

En la siguiente página marco en negrita y cursiva lo “obligatorio” del asunto.

Básicamente hay que crear un contenedor con display flex (mira cómo poner para navegadores antiguos)

Flexbox adapta los bloques a la caja con
display: flex; // Crece horizontalmente (flex-direction:row)
flex-wrap: wrap; // Inserta hasta final y pasa a línea siguiente.
coloca cada bloque vertical a la derecha del anterior si cabe y al llegar al final pasa a la línea siguiente. Utilizan valores por defecto (flex-grow:0, flex-shrink:1, flex-basis:auto).

<!DOCTYPE html><html>
<head>
<title>Galería</title>
<meta charset=”UTF-8″>
<style>

#marco {
background-color: white;
padding: 10px;
margin: 10px;
border: 3px solid black;
}

#contenedor {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;    // Crece horizontalmente (flex-direction:row)

-webkit-flex-wrap: wrap;
flex-wrap:wrap;    // Inserta hasta final y pasa a línea siguiente.
}

.vertical {
padding:3px;
border:1px solid black;
background-color:white;
  width:300px;
  height:400px;
}

</style>
</head>

<body>
<h1>Mi Galería</h1>

http://vishub.org

</div>
</div>

</body>
</html>

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: