- Teoría
- Teoría
El flujo
Ya vimos qué aspecto tienen las cajas. Ahora aprenderemos a controlar su distribución.
La forma en que las cajas interactúan y el orden en que se colocan en la página se llama flujo. Por ejemplo, en el flujo normal las cajas de bloque se colocan de arriba abajo y, por defecto, ocupan el ancho disponible. Este comportamiento se llama flujo normal.
Podemos modificar el flujo. Por ejemplo, al cambiar con CSS el tipo de las cajas y algunas de sus propiedades predeterminadas, podemos colocarlas en varias columnas o centrarlas en la página. Así, el mismo marcado puede dar lugar a distribuciones distintas.
Veamos cómo podemos modificar el flujo de la página con solo cambiar las clases de <main>.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Estudio de arquitectura AlterMansion</title>
</head>
<body>
<header class="page-header">
<img src="img/logo-alter-mansion.svg" width="60" height="30" alt="Logotipo del estudio de arquitectura AlterMansion">
<h1 class="title">Estudio de arquitectura AlterMansion</h1>
</header>
<main class="page-main">
<article class="article article-1">
<img class="article-image" src="img/house1.jpg" alt="Fachwerk-23" width="100" height="80">
<div>
<h2 class="article-title">Proyecto de casa de entramado «Fachwerk-23»</h2>
<p class="article-text">Amplia casa de dos pisos con 3 dormitorios, estudio, una gran cocina-comedor y una terraza abierta.</p>
</div>
</article>
<article class="article article-2">
<img class="article-image" src="img/house2.jpg" alt="Ermitaño-11" width="100" height="80">
<div>
<h2 class="article-title">Proyecto de casa de campo «Ermitaño-11»</h2>
<p class="article-text">Casa tipo estudio de un piso: la opción más compacta y económica. Comodidad mínima y privacidad máxima.</p>
</div>
</article>
<article class="article article-3">
<img class="article-image" src="img/house3.jpg" alt="Monarca-39" width="100" height="80">
<div>
<h2 class="article-title">Proyecto de residencia «Monarca-39»</h2>
<p class="article-text">Mansión de tres pisos para la realeza. Ideal para organizar bailes y recepciones de gala.</p>
</div>
</article>
<article class="article article-4">
<img class="article-image" src="img/house4.jpg" alt="Hobbit-15" width="100" height="80">
<div>
<h2 class="article-title">Proyecto de casa subterránea «Hobbit-15»</h2>
<p class="article-text">Vivienda ecológica y espaciosa con 5 habitaciones y una gran despensa. Ideal para personas de baja estatura.</p>
</div>
</article>
</main>
<footer class="page-footer"><span class="copyright">© Estudio de Cupcake, 2020</span></footer>
</body>
</html>
CSS
body {
margin: 0;
font-family: "Trebuchet MS", "Verdana", sans-serif;
font-size: 14px;
line-height: 22px;
background-color: #ebeff2;
color: #333333;
}
.page-header {
display: flex;
min-height: 50px;
align-items: center;
justify-content: center;
padding: 10px 20px;
background-color: #3b70a0;
}
.title {
margin: 0;
margin-left: 20px;
font-weight: 700;
font-size: 22px;
line-height: 28px;
color: #ffffff;
}
.page-main {
margin: 20px;
}
.article {
display: flex;
margin-bottom: 10px;
padding: 20px;
padding-top: 10px;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.article-image {
margin-top: 10px;
margin-right: 20px;
}
.article-title {
margin-top: 10px;
margin-bottom: 4px;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #24527C;
}
.article-text {
margin: 0;
}
.page-footer {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #3b70a0;
color: #ffffff;
}
.copyright:hover {
background-color: #ffffff;
color: #3b70a0;
}
.layout-1,
.layout-2,
.layout-3 {
display: grid;
column-gap: 10px;
}
.article-1 {
grid-area: article1;
}
.article-2 {
grid-area: article2;
}
.article-3 {
grid-area: article3;
}
.article-4 {
grid-area: article4;
}
.layout-1 {
grid-template-areas:
"article1 article1"
"article2 article3"
"article4 article4";
}
.layout-1 .article-2,
.layout-1 .article-3 {
flex-direction: column;
}
.layout-2 {
grid-template-areas:
"article1 article2"
"article3 article4";
}
.layout-2 .article {
flex-direction: column;
}
.layout-3 {
grid-template-columns: 1fr 2fr;
grid-template-areas:
"article1 article2"
"article1 article3"
"article4 article4";
}
.layout-3 .article-1 {
flex-direction: column;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Observa cómo los estilos pueden cambiar la distribución de una página.
- En la línea 13, agrega la clase
layout-1a<main>. - Reemplaza
layout-1porlayout-2. - Ahora reemplaza
layout-2porlayout-3.