CSS Flexbox

-


CSS Flexbox

CSS Flexbox es un modelo de diseño de cajas (box) que se utiliza en CSS para organizar elementos en un contenedor. Flexbox permite a los desarrolladores crear diseños flexibles y adaptables para sus sitios web sin tener que depender de hacks o trucos de diseño.

Flexbox utiliza un contenedor y elementos flexibles dentro del mismo, para organizar y distribuir el espacio disponible entre ellos. Los elementos dentro del contenedor se pueden ordenar, ajustar, expandir y contraer para adaptarse a diferentes tamaños de pantalla y diseños.

Algunas de las cosas que se pueden hacer con CSS Flexbox incluyen:

  • Alinear elementos horizontal y verticalmente
  • Distribuir elementos en una fila o columna
  • Expandir o contraer elementos para ajustar su tamaño en función del espacio disponible
  • Reorganizar el orden de los elementos sin tener que cambiar el código HTML
  • Ajustar el tamaño de los elementos de acuerdo a su contenido, sin necesidad de establecer un ancho o alto fijo
  • Crear diseños complejos con menos código CSS que con otras técnicas de diseño

CSS Flexbox se ha convertido en una herramienta muy útil para los diseñadores y desarrolladores web, y se utiliza en una amplia variedad de sitios web y aplicaciones. Es una técnica de diseño muy poderosa y relativamente fácil de aprender, lo que la hace accesible para la mayoría de los desarrolladores web. 



Ejemplo de Cajas flexibles Responsive:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}

.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h1>Responsive Flexbox</h1>

<p>La 'dirección flexible: row;' apila los elementos flexibles horizontalmente (de izquierda a derecha).</p>
<p>La 'dirección flexible: column;' apila los elementos flexibles verticalmente (de arriba a abajo).</p>
<p><b>Cambie el tamaño de la ventana del navegador para ver que la dirección cambia cuando el
El tamaño de la pantalla es de 800 píxeles de ancho o menos.</b></p>

<div class="flex-container">
  <div class="flex-item-left">Caja 1</div>
  <div class="flex-item-right">Caja 2</div>
</div>

</body>
</html>

----------------------------------------------------------------------------------------------------------------------

Completar los niveles en la siguiente página:

https://flexboxfroggy.com/#es

Comentarios

Publicar un comentario

Entradas populares de este blog

Teoría del Color aplicado a Diseño Web

-
Imagen
  TEORÍA DEL COLOR Y SU  APLICACIÓN EN DISEÑO WEB EL COLOR Cuando se trata de elegir colores para el diseño de un sitio web la elección NO ES SUBJETIVA. La elección de la paleta de colores de tu web es una de las decisiones más importantes y esenciales que hay que tomar antes de ponerse a trabajar en la web . CUALES SON LAS RECOMENDACIONES DE WCAG Ver artículo  Guía de accesibilidad web y color (II). Recomendaciones de las WCAG 2.1 para color y contraste Enlace:    https://www.nachomadrid.com/2020/05/wcag-color-contraste/ Complementar el artículo anterior con los siguientes conceptos:  Guía de accesibilidad web y color (I). Fundamentos de la percepción del color y el contraste Enlace:  https://www.nachomadrid.com/2020/05/guia-accesibilidad-web-color/ ¿Qué es una paleta de colores web? Una paleta de colores web es el conjunto de colores que se van a utilizar para diseñar y desarrollar la web de un negocio. Esta paleta de colores hay que seleccionarla antes de empezar a crear tu web, no
Leer más

Bootstrap 5

-
 Componentes Bootstrap 5 ACCESO A BOOTSTRAP 5  https://getbootstrap.esdocu.com/docs/5.1/getting-started/introduction/ <!DOCTYPE html> <html lang="es"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">   <link rel="stylesheet"     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />   <title>Componentes básicos Boot
Leer más