Resumen de técnicas de layout en CSS: márgenes negativos, Flexbox, diseño fluido, cascada y responsive

Márgenes negativos y diseño con floats

1.1 Márgenes negativos

Al aplicar un margen negativo a un elemento, su posición en el flujo del documento se desplaza, pero a diferencia de position: relative, el espacio que ocupaba originalmente se libera. Esto permite que elementos posteriores en el flujo ocupen ese espacio. Es importante recordar que el flujo del documento solo puede moverse de izquierda a derecha y de arriba abajo, por lo que los márgenes negativos solo pueden mover elementos hacia la izquierda o hacia arriba.

Un uso común de los márgenes negativos es ajustar bordes superpuestos en elementos flotantes. Por ejemplo, si varios div flotan y tienen borde, el borde del primero y el segundo se duplican. Aplicando un margen derecho negativo al primero, el borde se superpone y visualmente se vuelve simple.

superposición de bordes

ajuste con margen negativo

<style>
  .box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
  }
  #first-box {
    background: red;
    margin-right: -1px;
  }
</style>

1.1.1 Eliminar el borde derecho de una lista usando margen negativo

Al dar un margen derecho negativo al contenedor de la lista (ul), se inrcementa el ancho total del contenedor, permitiendo que los elementos flotantes no se desborden y se ajusten correctamente sin bordes extra.

lista sin borde derecho


<html>
<head>
<title>Eliminar borde derecho de lista</title>
<style>
  * { margin: 0; padding: 0; }
  body, ul, li { margin: 0; padding: 0; }
  #container {
    width: 430px;
    height: 210px;
    background: red;
  }
  ul {
    margin-right: -10px;
  }
  li {
    list-style: none;
    float: left;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    background: green;
  }
</style>
</head>
<body>
  <div id="container">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

Un segundo enfoque usa overflow: hidden en el contenedor padre para ocultar el desbordamiento, además de eliminar el borde inferior no deseado.

método con overflow


<html>
<head>
<title>Eliminar borde derecho - método overflow</title>
<style>
  * { margin: 0; padding: 0; }
  #container {
    width: 430px;
    overflow: hidden;
    background: red;
  }
  ul {
    margin-right: -10px;
    margin-bottom: -10px;
    overflow: hidden;
  }
  li {
    list-style: none;
    float: left;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    background: green;
  }
</style>
</head>
<body>
  <div id="container">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

1.1.2 Centrado horizontal y vertical con margen negativo + posicionamiento

Esta técnica no se detalla aquí, pero se menciona como una aplicación conocida del margen negativo junto con position: absolute y desplazamiento del 50%.

1.1.3 Eliminar el borde inferior del último elemento de una lista

Si la altura del contenedor no está fija, los elementos la expanden. Al dar un margen inferior negativo al último li, este se mueve hacia arriba reduciendo la altura del contenedor, oucltando el borde inferior detrás del borde del padre (si se usa overflow: hidden).

eliminar borde inferior último li


<html>
<head>
<title>Eliminar borde inferior último elemento</title>
<style>
  * { margin: 0; padding: 0; list-style: none; }
  ul {
    border: 3px solid lightblue;
    width: 100px;
    overflow: hidden;
  }
  li {
    border-bottom: 1px dashed red;
  }
  li:last-child {
    margin-bottom: -1px;
  }
</style>
</head>
<body>
  <ul>
    <li>Ítem A</li>
    <li>Ítem B</li>
    <li>Ítem C</li>
    <li>Ítem D</li>
    <li>Ítem E</li>
  </ul>
</body>
</html>

1.2 Diseño de dos alas (Holy Grail Layout)

También conocido como diseño de Santo Grial. Requisitos:

Tres columnas: centro flexible, laterales con ancho fijo.
La columna central debe mostrarse primero en el HTML.
Cualquier columna puede tener la altura máxima.
Solo se permite un div extra.
CSS simple y sin hacks.

esquema dos alas


<html>
<head>
<title>Dos alas (Holy Grail)</title>
<style>
  * { margin: 0; padding: 0; }
  html, body { height: 100%; }
  #container {
    width: 90%;
    height: 100%;
    margin: 0 auto;
  }
  #header, #footer {
    height: 12.5%;
    background: lightblue;
  }
  #main {
    height: 75%;
  }
  #center, #left, #right {
    float: left;
    height: 100%;
  }
  #center {
    width: 100%;
    background: lightgreen;
  }
  #left {
    width: 20%;
    margin-left: -100%;
    background: red;
  }
  #right {
    width: 20%;
    margin-left: -20%;
    background: yellow;
  }
  #main-inner {
    padding: 0 20%;
  }
</style>
</head>
<body>
  <div id="container">
    <div id="header">Header</div>
    <div id="main">
      <div id="center">
        <div id="main-inner">Centro</div>
      </div>
      <div id="left">Izquierda</div>
      <div id="right">Derecha</div>
    </div>
    <div id="footer">Footer</div>
  </div>
</body>
</html>

1.3 Diseño multicolumna

1.3.1 Sistema de cuadrícula (Grid System)

Consiste en dividir el ancho disponible en columnas de porcentajes fijos usando float. No es un verdadero diseño multicolumna, ya que el contenido no fluye automáticamente de una columna a otra.

ejemplo grid system


<html>
<head>
<title>Sistema de cuadrícula</title>
<style>
  * { margin: 0; padding: 0; }
  html, body { height: 100%; }
  #container {
    width: 980px;
    height: 10%;
    margin: 0 auto;
  }
  #container div { height: 100%; }
  .col-25 {
    width: 25%;
    float: left;
    background: lightgreen;
  }
  .col-50 {
    width: 50%;
    float: left;
    background: lightblue;
  }
  .col-75 {
    width: 75%;
    float: left;
    background: red;
  }
</style>
</head>
<body>
  <div id="container">
    <div class="col-25">A</div>
    <div class="col-50">B</div>
    <div class="col-25">C</div>
  </div>
</body>
</html>

CSS3 introdujo propiedades nativas para diseñar multicolumna verdaderas:

column-count: número de columnas.
column-gap: espacio entre columnas.
column-rule: borde entre columnas (similar a border).
columns: atajo para column-width y column-count.

multicolumna css3

Diseño fleixble (Flexbox)

Flexbox es un modelo de layout unidimensional que permite distribuir espacio entre elementos de un contenedor de manera eficiente.

Propiedades clave:

display: flex en el contenedor.
flex: <grow> <shrink> <basis> en los hijos.

Ejemplo básico: menú de navegación con enlaces distribuidos equitativamente.


<html>
<head>
<title>Flexbox básico</title>
<style>
  * { margin: 0; padding: 0; list-style: none; }
  html, body { height: 100%; }
  ul {
    width: 980px;
    margin: 0 auto;
    display: flex;
  }
  li {
    flex: 1;
  }
  li a {
    display: block;
    height: 20px;
    line-height: 20px;
    border: 1px solid lightblue;
    text-decoration: none;
    text-align: center;
  }
</style>
</head>
<body>
  <ul id="nav">
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Contacto</a></li>
    <li><a href="#">Acerca del sitio</a></li>
    <li><a href="#">Soporte técnico</a></li>
  </ul>
</body>
</html>

También se pueden asignar factores de crecimiento diferentes para crear proporciones.

<style>
  .li1 { flex: 1; }
  .li2 { flex: 2; }
  .li3 { flex: 3; }
  .li4 { flex: 4; }
</style>

Dirección del flujo: flex-flow: row | row-reverse | column | column-reverse controla si los elementos se disponen en fila o columna.

Diseño fluido (Fluid Layout)

El diseño fluido usa porcentajes en lugar de píxeles para los anchos, adaptándose al tamaño de la ventana. Es la base de los diseños responsive.

Diseño en cascada (Masonry / Waterfall)

Es un tipo de layout fluido donde los elementos se colocan verticalmente optimizando el espacio, de forma que no haya huecos grandes. Es popular en sitios como Pinterest.

Ventajas

Reduce la complejidad visual (sin paginación).
Interacción natural en dispositivos táctiles.
Mayor participación del usuario.

Desventajas

No apto para todos los tipos de contenido (ej. e-commerce).
Mayor complejidad técnica.
Dificulta el acceso al pie de página.
Problemas de SEO.
Menos control sobre la cantidad de páginas.

4.1 Implementación con Masonry

Masonry es una biblioteca JavaScript (independiente de jQuery) que facilita la creación de layouts en cascada. Se usa mediante un selector y configuración de ancho de columna.

var msnry = new Masonry('#grid', {
  itemSelector: '.grid-item',
  columnWidth: 200
});

4.2 imagesLoaded

imagesLoaded detecta cuándo todas las imágenes de un contenedor se han cargado, útil para evitar reflows en Masonry.

imagesLoaded(document.querySelector('#grid'), function() {
  console.log('Todas las imágenes cargadas');
});

4.3 Infinite Scroll

Plugin que carga contenido adicional al hacer scroll, usado con Masonry.

$('#masonry-container').infinitescroll({
  navSelector  : '#next',
  nextSelector : '#next a',
  itemSelector : '.item',
  loading: {
    finishedMsg: 'No hay más contenido',
    img: 'loader.gif',
    msgText: 'Cargando...'
  }
});

Diseño responsive (Responsive Design)

5.1 Media queries

Las @media queries permiten aplicar estilos según características del dispositivo (ancho de pantalla, orientación, etc.).

@media only screen and (min-width: 320px) and (max-width: 640px) {
  /* estilos para móviles */
}

5.2 Sistema de cuadrícula responsive

Combinando media queries con porcentajes se consigue un grid que se adapta al viewport.

5.3 Respond.js

Polyfill para que versiones antiguas de Internet Explorer (IE6-8) soporten media queries.

5.4 Viewport (área visible)

En dispositivos móviles, el viewport por defecto es mayor que la pantalla física, lo que provoca zoom. Para un diseño responsive óptimo se usa la etiqueta meta viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esto establece el ancho del viewport igual al ancho del dispositivo (ideal viewport), evitando scroll horizontal y zoom no deseado.

Etiquetas: css Flexbox diseño responsive margen negativo layout fluido

Publicado el 7-9 18:27

Friki Work