El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Propiedades del Ítem Flex

Siguiente ►
►

En este tema, exploraremos las propiedades específicas que se pueden aplicar a los ítems flexibles dentro de un contenedor Flexbox. Estas propiedades permiten controlar cómo se distribuyen y alinean los ítems dentro del contenedor. Las propiedades principales que cubriremos son:

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

  1. Propiedad order

La propiedad order define el orden en el que se muestran los ítems flexibles dentro del contenedor. Por defecto, todos los ítems tienen un valor de order de 0, pero puedes asignarles valores positivos o negativos para cambiar su posición.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Propiedad order</title>
    <style>
        .container {
            display: flex;
        }
        .item1 {
            order: 2;
        }
        .item2 {
            order: 1;
        }
        .item3 {
            order: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

En este ejemplo, aunque el item1 aparece primero en el HTML, se mostrará en segundo lugar debido a la propiedad order.

  1. Propiedad flex-grow

La propiedad flex-grow especifica cuánto crecerá un ítem en relación con los otros ítems flexibles dentro del mismo contenedor. El valor por defecto es 0, lo que significa que el ítem no crecerá más allá de su tamaño inicial.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Propiedad flex-grow</title>
    <style>
        .container {
            display: flex;
        }
        .item1 {
            flex-grow: 1;
        }
        .item2 {
            flex-grow: 2;
        }
        .item3 {
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

En este ejemplo, el item2 crecerá el doble que item1 y item3.

  1. Propiedad flex-shrink

La propiedad flex-shrink determina cuánto puede reducirse un ítem en relación con los otros ítems flexibles dentro del mismo contenedor. El valor por defecto es 1, lo que significa que el ítem puede reducirse si es necesario.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Propiedad flex-shrink</title>
    <style>
        .container {
            display: flex;
        }
        .item1 {
            flex-shrink: 1;
        }
        .item2 {
            flex-shrink: 2;
        }
        .item3 {
            flex-shrink: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

En este ejemplo, el item2 se reducirá el doble que item1 y item3 si el espacio es limitado.

  1. Propiedad flex-basis

La propiedad flex-basis define el tamaño inicial de un ítem antes de que se distribuya el espacio restante. Puede ser un valor absoluto (por ejemplo, 200px) o relativo (por ejemplo, 20%).

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Propiedad flex-basis</title>
    <style>
        .container {
            display: flex;
        }
        .item1 {
            flex-basis: 100px;
        }
        .item2 {
            flex-basis: 200px;
        }
        .item3 {
            flex-basis: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

En este ejemplo, item2 tendrá un tamaño inicial de 200px, mientras que item1 y item3 tendrán un tamaño inicial de 100px.

  1. Propiedad flex

La propiedad flex es una propiedad abreviada que combina flex-grow, flex-shrink y flex-basis. Es una forma conveniente de establecer las tres propiedades a la vez.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Propiedad flex</title>
    <style>
        .container {
            display: flex;
        }
        .item1 {
            flex: 1 1 100px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */
        }
        .item2 {
            flex: 2 1 200px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 200px */
        }
        .item3 {
            flex: 1 1 100px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

En este ejemplo, item2 crecerá el doble que item1 y item3, y tendrá un tamaño inicial de 200px.

  1. Propiedad align-self

La propiedad align-self permite sobrescribir la alineación de un ítem específico dentro del contenedor flexible. Los valores posibles son auto, flex-start, flex-end, center, baseline y stretch.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Propiedad align-self</title>
    <style>
        .container {
            display: flex;
            height: 200px;
            align-items: center; /* Alinea todos los ítems en el centro */
        }
        .item1 {
            align-self: flex-start; /* Sobrescribe la alineación para este ítem */
        }
        .item2 {
            align-self: flex-end; /* Sobrescribe la alineación para este ítem */
        }
        .item3 {
            align-self: center; /* Sobrescribe la alineación para este ítem */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

En este ejemplo, item1 se alineará al inicio del contenedor, item2 al final y item3 en el centro, independientemente de la alineación general del contenedor.

Ejercicio Práctico

Ejercicio:

Crea un contenedor flexible con tres ítems. Configura las propiedades flex-grow, flex-shrink y flex-basis para que el primer ítem ocupe el 50% del espacio disponible, el segundo ítem ocupe el 30% y el tercer ítem ocupe el 20%. Asegúrate de que los ítems se reduzcan proporcionalmente si el contenedor se hace más pequeño.

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio Flexbox</title>
    <style>
        .container {
            display: flex;
        }
        .item1 {
            flex: 5 1 50%; /* flex-grow: 5, flex-shrink: 1, flex-basis: 50% */
        }
        .item2 {
            flex: 3 1 30%; /* flex-grow: 3, flex-shrink: 1, flex-basis: 30% */
        }
        .item3 {
            flex: 2 1 20%; /* flex-grow: 2, flex-shrink: 1, flex-basis: 20% */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

En esta solución, item1 crecerá para ocupar el 50% del espacio disponible, item2 el 30% y item3 el 20%. Si el contenedor se hace más pequeño, los ítems se reducirán proporcionalmente.

Conclusión

En esta lección, hemos aprendido sobre las propiedades específicas de los ítems flexibles en Flexbox. Estas propiedades nos permiten controlar el orden, el crecimiento, la reducción, el tamaño inicial y la alineación de los ítems dentro de un contenedor flexible. Con estos conocimientos, puedes crear diseños más complejos y adaptables utilizando Flexbox. En la próxima lección, exploraremos cómo crear diseños completos utilizando Flexbox.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados