Flexbox (cajas flexibles) de CSS
Flexbox es una nueva modalidad de diseño visual que trae CSS3.
El uso de flexbox asegura que los elementos se comporten predeciblemente cuando el diseño visual de la página se encuentre con o deba adaptarse a diferentes tamaños de pantalla y diferentes dispositivos de visualización. Desventajas: no funciona en IE10 y anteriores.
Aprenderás mas de flexbox (caja flexible) de CSS en un capitulo futuro.
Ejemplo con flexbox:
Comidas del Mundo
Pastel de Queso
El pastel de queso es uno de los postres más comunes del mundo y, quizás, uno de los más antiguos que utilizan lácteos, diferentes de la leche. El primer registro que hace mención al pastel de queso viene desde los antiguos Juegos Olímpicos griegos. Marcus Porcius Cato (o Cato "el viejo") escribió la receta para su preparación en uno de sus tantos libros de cocina Romana, llamados "De Agricultura".
Reduce bastante el ancho de la ventana de tu navegador de internet para apreciar en acción al código de abajo.
El código HTML y CSS que se haya tras este ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div#pizarrón-flexible {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
div#pizarrón-flexible > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
article#tramo2 {
text-align: left;
}
header.extremo2 {
background: black;
color: white;
}
footer.extremo2 {
background: #aaa;
color: white;
}
nav#canoa2 {
background: #eee;
}
nav#canoa2 ul {
list-style-type: none;
padding: 0;
}
nav#canoa2 ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {
nav#canoa2 {
text-align: left;
-webkit-flex: 1 auto;
flex: 1 auto;
-webkit-order: 1;
order: 1;
}
article#tramo2 {
-webkit-flex: 5 0px;
flex: 5 0px;
-webkit-order: 2;
order: 2;
}
footer.extremo2 {
-webkit-order: 3;
order: 3;
}
}
</style>
</head>
<body>
<div id="pizarrón-flexible">
<header class="extremo2">
<h1>Comidas del Mundo</h1>
</header>
<nav id="canoa2">
<ul>
<li><a href="#">Pastel de Queso</a></li>
<li><a href="#">Otra comida</a></li>
<li><a href="#">Otra comida mas</a></li>
</ul>
</nav>
<article id="tramo2">
<h1>Pastel de Queso</h1>
<p>El pastel de queso es uno de los postres más comunes del mundo y, quizás, uno de los más antiguos que utilizan lácteos,
diferentes de la leche. El primer registro que hace mención al pastel de queso viene desde los antiguos Juegos Olímpicos
griegos. Marcus Porcius Cato (o Cato "el viejo") escribió la receta para su preparación en uno de sus tantos libros de
cocina Romana, llamados "De Agricultura".</p>
</article>
<footer class="extremo2">Derecho de autor © Abuelitas.com</footer>
</div>
</body>
</html>
