Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Guía de Flexbox

    Cargado por

    Jairo Hernan Gonzalez Mora
    30 vistas8 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    30 vistas8 páginas

    Guía de Flexbox

    Cargado por

    Jairo Hernan Gonzalez Mora

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 8

    Guía de Flexbox

    Qué es Flexbox
    Son un conjunto de propiedades de CSS que se utilizan para el diseño y creación de Laouts.

    Qué es un Layout o Maquetación


    Es la manera como nosotros disponemos del espacio que tenemos dentro de nuestro documento para colocar todos los
    elementos que van a formar nuestra página (Secciones, capas, imágenes, etc ).

    Hoy en día es importante el manejo de estructuras que permitan crear páginas y sitios web responsiva o adaptativos, es
    decir que los elementos dentro de la pagina se acomoden y ajusten a diferentes dispositivos.

    Lo que Ud debe saber:

    Elemento padre : Es aquel elemento que tiene contenido dentro de si a otros elementos llamados hijos.
    Elemento hijo : Es aquel elemento que se ubica o está contenido dentro de un elemento padre

    Elemento Padre

    Elementos Hijos
    Preparando nuestra mesa de trabajo
    Index.html

    <!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">
    <title>Flexbox</title>
    <link rel="stylesheet" href="css/estilos.css">
    </head>
    <body>

    <div class="caja">

    <div class="item1"></div>
    <div class="item2"></div>

    </div>

    </body>
    </html>

    estilos.css

    .caja{
    background-color: rgba(255,0,0,0.281);
    width: 500px;
    height: 350px;
    }

    .item1{
    background-color: black;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    }

    .item2{
    background-color: rgb(13,144,161);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    }
    Leccion No 1

    Ejes en la caja flexible

    Propiedad : flex-direction

    Valores : column;
    row;
    column-reverse;
    row-reverse;

    Lo que Ud debe saber:

     Flexbox lo que hace es crear una caja flexible o un contenedor flexible, en nuestro ejercicio el contenedor es caja

     Para iniciar a trabajar con flexbox debemos convertir el elemento padre en un contenedor flexible mediante la
    propiedad display y el valor flex.

    display: flex;
    Aplicamos la propiedad al
    elemento padre

    De esta manera ya iniciaste


    a trabajar con Flexbox

    Nota:

    Los elementos HTML en su forma habitual se ubican en forma de cascada, es decir uno debajo de otro, pero al momento
    de convertir un contenedor en contenedor flexible esta disposición cambia y los elementos se ubican en forma
    horizontal y se ordena de izquierda a derecha, este es el primer cambio que se observa cuando aplicamos la propiedad
    display:flex.

    ELEMENTO PADRE O CONTENEDOR


    Lo que Ud debe saber:

    Cuando convertimos una caja en un elemento flexible, esta adquiere


    dos ejes: Un eje horizontal y un eje vertical, además por defecto el eje
    horizontal se convierte en el eje principal y el eje vertical se convierte
    en el eje secundario.

    Eje Horizontal

    Eje Vertical
    ELEMENTO PADRE O CONTENEDOR

    Como el eje principal por defecto es el eje horizontal al momento de aplicar el display:flex los elemento se ubican
    horizontalmente.

    Cómo cambiar el orden de los ejes

    Para cambiar el orden de los ejes, es decir convertir el eje vertical como principal y el eje horizontal como secundario
    utilizamos la propiedad: flex-direction

    Se debe aplicar al elemento padre o contenedor.

    Valores:

    row : Establece como eje principal el eje horizontal, es el valor que viene por defecto
    column : Establece como eje principal el eje vertical.

    Eje SECUNDARIO

    Eje PRINCIPAL

    flex-direction:
    row
    Eje PRINCIPAL

    Eje SECUNDARIO

    flex-direction: column
    Lección No 2

    Cómo alinear y posicionar los elementos hijos respecto a sus ejes (PRINCIPAL - SECUNDARIO

    Para posicionar los elementos hijos dentro de su contenedor padre utilizaremos las propiedades: justify-content y align-
    items.

    Justify-content : Permite posicionar los elementos hijos con base a su eje principal

    Valores:

    flex-end : Envía los elementos al final de su eje principal

    flex-start : Envía los elementos al inicio de su eje principal (Por defecto)

    center : Envía los elementos al centro de su eje principal

    space-between : Distribuye los elementos dentro del eje principal, iniciando desde el extremo.
    space-around : Crea un espacio proporcional alrededor de cada elemento.

    El mismo principio regirá si cambiamos el eje principal con el valor column, pero ahora la distribución se hará de
    forma vertical.

    align-items : Permite posicionar los elementos hijos con base a su eje secundario

    Valores:

    center : Envía los elementos al centro de su eje secundario

    Eje principal

    Eje secundario

    flex-start : Envía los elementos al inicio de su eje secundario (Por defecto)

    Eje principal

    Eje secundario
    flex-end : Envía los elementos al final de su eje secundario

    Eje principal

    Eje secundario

    También podría gustarte