Scribd
Cargar
5 vistas3 páginas

Tarea Flexbox Ejemplo Avanzado

Flexbox es un modelo de diseño en CSS que permite crear diseños flexibles y adaptativos mediante la propiedad 'display: flex;'. Se pueden controlar la dirección, alineación y ajuste de los elementos en el contenedor, así como el comportamiento y orden de los elementos hijos. Se presentan ejemplos básicos y avanzados, incluyendo un diseño de tarjetas utilizando Flexbox.

Cargado por

Cristina Leal Mota
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
5 vistas3 páginas

Tarea Flexbox Ejemplo Avanzado

Flexbox es un modelo de diseño en CSS que permite crear diseños flexibles y adaptativos mediante la propiedad 'display: flex;'. Se pueden controlar la dirección, alineación y ajuste de los elementos en el contenedor, así como el comportamiento y orden de los elementos hijos. Se presentan ejemplos básicos y avanzados, incluyendo un diseño de tarjetas utilizando Flexbox.

Cargado por

Cristina Leal Mota
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

Explicación de Flexbox en CSS y Ejemplos Avanzados

Flexbox es un modelo de diseño en CSS que facilita la creación de diseños

flexibles y adaptativos para páginas web. Aquí aprenderás cómo funciona y cómo aplicarlo.

1. Contenedor Flex

Para crear un contenedor flex, se aplica la propiedad 'display: flex;'.

Esto convierte a los elementos hijos en elementos flexibles que se pueden

organizar de manera flexible.

Propiedades del contenedor:

- flex-direction: Define la dirección de los elementos (row, column, etc.).

- justify-content: Controla la alineación de los elementos a lo largo del eje principal.

- align-items: Alinea los elementos a lo largo del eje transversal.

- flex-wrap: Permite que los elementos se ajusten a nuevas líneas si no caben en el contenedor.

2. Propiedades de los elementos hijos:

- flex: Define el comportamiento flexible de los elementos hijos.

- align-self: Permite alinear un solo elemento de forma diferente al resto.

- order: Cambia el orden visual de los elementos.

Ejemplo básico:

HTML:

<div class="contenedor">

<div class="item">1</div>

<div class="item">2</div>
<div class="item">3</div>

</div>

CSS:

.contenedor {

display: flex;

justify-content: center;

gap: 20px;

.item {

background-color: #4caf50;

color: white;

padding: 20px;

text-align: center;

flex: 1;

3. Ejemplo avanzado: Tarjetas con Flexbox

HTML:

<div class="contenedor-tarjetas">

<div class="tarjeta">...</div>

<div class="tarjeta">...</div>

</div>

CSS:

.contenedor-tarjetas {

display: flex;
flex-wrap: wrap;

justify-content: space-between;

gap: 20px;

.tarjeta {

background-color: #f9f9f9;

width: calc(25% - 20px);

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

También podría gustarte