D4mations.com

#6 Tipos de alineamiento con Flexbox – Curso completo de Bootstrap 4! 2017 desde cero

[ad_1]
https://i.ytimg.com/vi/CZwORzNgF2M/hqdefault.jpg



Hoy conoceremos los tipos de alineamiento tanto en filas como en columnas, esto Bootstrap 4 lo incorpora con la nueva tecnología de Flexbox.

Te recomiendo que antes de ver este módulo mirar los siguientes videos tutoriales de Flexbox, así entenderás mucho mejor el funcionamiento y los tipos de posiciones.

Guía Flexblox parte 1: https://youtu.be/TtgkU8LMGAc
Guía Flexbos parte 2: https://youtu.be/-yRjE6YieoM

No olvides suscribirte a este hermoso canal y destruirme en los comentarios 🙂

También puedes seguirme en Facebook: https://www.facebook.com/bluuweb/

Finalmente visita mi sitio web: http://ignaciogutierrez.cl

Original source

d4mer

,
, , , , , , , , , , , , , , ,

17 responses to “#6 Tipos de alineamiento con Flexbox – Curso completo de Bootstrap 4! 2017 desde cero”

  2. Hola de nuevo. Esta muy bien el curso.
    Una cosa. El flex-first, para mover una columna al principio de la fila, no me funciona ni con Crhome, ni con FireFox.
    Te pongo el código para ver si detectamos el error…

    <!doctype html>
    <html lang="en">
    <head>
    <title>Alineaciones</title>
    <!– Required meta tags –>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!– Bootstrap CSS –>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <style>

    .borde {border: 1px #000 solid; text-align: center; height: 50px;}
    .color1{background-color: #eeeeee;}
    .color2{background-color: #fcc314;}
    .color3{background-color: #94ac3c;}
    .color4{background-color: #295ba7; height: 500px;}
    </style>
    </head>
    <body>
    <div class="container"><h1>Alineamientos</h1></div>
    <div class="container">
    <div class="row color4 align-items-center justify-content-center justify-content-around">
    <div class="borde col color3">1
    <div class="row">
    <div class="col color2">Sub1</div>
    <div class="col color2">Sub2</div>
    <div class="col color2">Sub3</div>
    </div>
    </div>
    <div class="borde col-1 color3">2</div>
    <div class="borde col-1 color3">3</div>
    <div class="borde col-1 color3 offset-md-3">4</div>
    <div class="borde col-1 color3 d-flex-first">5</div>
    <div class="borde col-1 color3">6</div>
    </div>
    </div>

    <!– Optional JavaScript –>
    <!– jQuery first, then Popper.js, then Bootstrap JS –>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
    </html>

  3. Saludos blu, yo de nuevo por aca viendo tus tutos que son excelentes, queria saber si me puedes ayudar con algo, fijate en tu cuadro 1 de tu video, como podria colocarlo con 10 px superior y 10px izquierdo sin usar ccs sino solo codigos bootstrap, se puede?. quedando en la parte superior izquierda con un margen superior y uno izquierdo. gracias

  4. Hola! para los que no les funcione con flex-first para posicionar el cuadro 5, tambien pueden utilizar order-first. En lo que tengo algo de duda de porque pasa ese detalle, es si será por la diferencia de versiones entre la version mas actual de bootstrap y la v4 alpha 6

  5. Muy buen tutorial bluu, me ha sido muy útil, quizás, si sería bueno comentar que el flex-box que incorpora ya Bootstrap, y para los que no lo han trabajado, se utiliza con los hijos de div, es decir, que se aplica en el "row", para que funcione en los hijos "col". Sigue con los tutoriales!, saludos desde Bogotá

  6. Gran vídeo amigo pero una consulta, Offset en realidad no es el desplazamiento de columnas solo a la derecha?
    Tengo entendido que esto solamente desplaza a la derecha sin encimar, diferente de push y pull; (no genera espacio vacío en si) ´´??´´

  8. El curso buenisimo!!!! excelente gracias una manera muy facil de explicar, solo queria comentar que tambien cambiaron estas clases en la ultima version 4 ahora se escriben asi:
    <div class="d-flex align-items-start">…</div>
    <div class="d-flex align-items-end">…</div>
    <div class="d-flex align-items-center">…</div>
    <div class="d-flex align-items-baseline">…</div>
    <div class="d-flex align-items-stretch">…</div>

    hay que agregarle d-flex antes y listo. Saludos!

  9. una curiosas bluu, porque no usaste la propiedad d-flex en este video? 😮 , no es necesaria asi como en css cuando escribiamos "display:flex" para que puedan funcionar las demas propiedades?

  13. Muchachos una ayuda porque no puedo alinear central y al final ???

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!– Required meta tags –>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!– Bootstrap CSS –>
    <link rel="stylesheet" href="css/bootstrap-grid.min.css">
    <style>

    .borde{border: 2px #000 solid; text-align: center; height: 50px;}
    .color1{background: #eeeeee;}
    .color2{background: #fcc314;}
    .color3{background: #94ac3c;}
    .color4{background: #295ba7; height: 500px}

    </style>

    </head>
    <body>

    <div class="container"> <h1>Alineamientos</h1></div>
    <div class="container">
    <div class="row color4 align-items-center">
    <div class="col-1 borde color3">1</div> –>> lo raro es que acá no permite moverlo
    <div class="col-1 borde color3">2</div>
    <div class="col-1 borde color3">3</div>
    <div class="col-1 borde color3">4</div>
    <div class="col-1 borde color3">5</div>
    <div class="col-1 borde color3">6</div>
    </div>
    </div>

    <!– jQuery first, then Tether, then Bootstrap JS. –>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

  14. tengo problemas al colocarle ese pequeño fondo que tu le colocas. cuando le doy la altura, las celdas tambien se me colocan a la misma altura que el fondo… como puedo slucionar el inconveniente?? mil gracias

Leave a Reply