Scribd Logo
Upload

Welcome to Scribd!

  • EJERCICIO2

    Uploaded by

    Fernando Vargas Blandino
    19 views10 pages
    The document provides code examples for arranging numbers in a flexbox container with multiple steps: 1. The first example centers the number horizontally and vertically within the container. 2. Subsequent examples add additional numbers and use flex properties like flex-direction, justify-content, and align-self to position the numbers horizontally and vertically. 3. Later examples nest the numbers within additional div elements and apply flexbox to position groups of numbers horizontally and vertically within the container. The document walks through incremental changes to the code to demonstrate different flexbox properties for arranging elements within a flex container.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides code examples for arranging numbers in a flexbox container with multiple steps: 1. The first example centers the number horizontally and vertically within the container. 2. Subsequent examples add additional numbers and use flex properties like flex-direction, justify-content, and align-self to position the numbers horizontally and vertically. 3. Later examples nest the numbers within additional div elements and apply flexbox to position groups of numbers horizontally and vertically within the container. The document walks through incremental changes to the code to demonstrate different flexbox properties for arranging elements within a flex container.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    19 views10 pages

    EJERCICIO2

    Uploaded by

    Fernando Vargas Blandino
    The document provides code examples for arranging numbers in a flexbox container with multiple steps: 1. The first example centers the number horizontally and vertically within the container. 2. Subsequent examples add additional numbers and use flex properties like flex-direction, justify-content, and align-self to position the numbers horizontally and vertically. 3. Later examples nest the numbers within additional div elements and apply flexbox to position groups of numbers horizontally and vertically within the container. The document walks through incremental changes to the code to demonstrate different flexbox properties for arranging elements within a flex container.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 10

    Teniendo el siguiente código.

    Generar por separado

    <div class="cara"> .cara{


    <div class="num">1</div> background: grey;
    </div> height: 120px;
    width: 120px;
    margin:10px;
    }

    .num{
    color:white;
    font-size:40px;
    }

    1.- Generar

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    Justify-content:center;
    }

    .num{
    color:white;
    font-size:40px;
    Align-self:center;
    }
    Resumen de pasos:

    1.- Justifico al centro horizontalmente (desde .cara)

    2.-Alineo al centro verticalmente desde .num

    2.- Generar

    2.1 1 y 2 y los distancio con space-between;

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    Justify-content:space-between;
    }

    .num{
    color:white;
    font-size:40px;
    2.2.- Alineo el 2 verticalmente
    }

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    flex-direction:column;
    Justify-content:space-between;
    }

    .num{
    color:white;
    font-size:40px;
    }

    .cara div:nth-child(2){
    align-self:end;
    Resumen de pasos:

    1.- Justificar con between:

    2.-Alinear el 2 verticalmente

    3.- Generar

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    flex-direction:row-reverse;
    Justify-content:space-between;
    }

    .num{
    color:white;
    font-size:40px;
    }

    <div class="cara">
    <div class="num">1</div>
    <div class="num">2</div>
    <div class="num">3</div>
    .cara{
    </div>
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    flex-direction:row-reverse;
    Justify-content:space-between;
    }
    Luego alineo el 2 y 3 verticalmente
    .num{
    color:white;
    font-size:40px;
    }
    .cara div:nth-child(2), {
    align-self:center;
    }
    .cara div:nth-child(3){
    }

    4.-

    .cara{
    4.1-
    background: grey;
    height: 120px;
    width: 120px;
    <div class="cara"> margin:10px;
    <div class="d1"> display:flex;
    <div class="num">1</div> display:flex;
    <div class="num">2</div> }
    </div>
    <div class="d2"> .num{
    <div class="num">3</div> color:white;
    <div class="num">4</div> font-size:30px;
    </div> }
    </div>

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    display:flex;
    flex-direction:column;
    }

    .num{
    color:white;
    font-size:30px;
    }
    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    flex-direction:column;
    }

    .num{
    color:white;
    font-size:40px;
    }

    .cara div:nth-child(1){
    display:flex;
    }
    .cara div:nth-child(2){
    display:flex;
    }

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    flex-direction:column;
    }

    .num{
    color:white;
    font-size:40px;
    }

    .cara div:nth-child(1){
    display:flex;
    justify-content:space-between;
    }
    .cara div:nth-child(2){
    justify-content:space-between;
    }

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    }

    .num{
    color:white;
    font-size:40px;
    }

    .cara div:nth-child(1), .cara div:nth-child(2)


    {
    display:flex;
    justify-content:space-between;
    }

    5.1.- .cara{
    <div class="cara"> background: grey;
    <div class="d1"> height: 120px;
    <div class="num">1</div> width: 120px;
    <div class="num">2</div> margin:10px;
    </div> display:flex;
    <div class="num">3</div> }
    <div class="d2">
    <div class="num">5</div> color:white;
    </div> font-size:40px;
    </div> }

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    flex-direction:column; .cara{
    } background: grey;
    height: 120px;
    .num{ width: 120px;
    color:white; margin:10px;
    font-size:40px; display:flex;
    } flex-direction:column;
    }

    .num{
    color:white;
    font-size:40px;
    }

    .cara div:nth-child(1){
    display:flex;

    }
    .cara{
    .cara div:nth-child(3){
    background: grey;
    display:flex;
    height: 120px;
    width: 120px;
    }
    margin:10px;
    display:flex;
    flex-direction:column;
    }

    .num{
    color:white;
    font-size:35px;
    }

    .cara div:nth-child(1), .cara div:nth-child(3){


    display:flex;
    justify-content:space-between;
    }
    .cara div:nth-child(2){
    align-self:center;
    }
    6.-

    6.1.- meto 123 en un contendeor y 456 en otro


    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    }
    .num{
    <div class="cara"> color:white;
    <div class="prim"> font-size:30px;
    <div class="num">1</div> }
    <div class="num">2</div>
    <div class="num">3</div>
    </div>
    <div class="seg">
    <div class="num">4</div>
    <div class="num">5</div>
    <div class="num">6</div>
    </div>
    </div>

    6.2.- Añadiendo separo las columnas, con between

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    Justify-content:space-between;
    }

    6.3.- ahora trato las columnas

    .cara{
    background: grey;
    height: 120px;
    width: 120px;
    margin:10px;
    display:flex;
    Justify-content:space-between;
    }

    .num{
    color:white;
    font-size:30px;
    }

    .cara div:nth-child(1),.cara div:nth-


    child(2) {
    display:flex;
    flex-direction:column;
    }

    You might also like