Grillas Flex con Bootstrap

Clase 28 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Clase anteriorSiguiente clase

Resumen

Sistema de grilla construido con Flexbox

Recuerda:

Si usas este sistema de grillas, no podremos soportar navegadores antiguos.

Carlos Andrés Millan Satizabal

student•

En la versión alpha-6, flexbox se encuentra incluido y no hay necesidad de bajar otro archivo css, además las clases de flexbox son diferentes a las presentadas en el video, para que verifiquen la documentación, en la sesión Utilities.

El boostrap presentado en el video es la versión alpha-5 el cual se puede descargar un css con flex, en la versión alpha-6 ya viene incluido internamente.

Ezequiel Piñero

student•

Es una locura seguir el curso con tantos cambios en las clases 😕

Víctor de Jesús Pacheco Padilla

student•

Creo que el curso debió haber sido con una versión estable de Bootstrap, no con un Beta. Total, cuando se libere una versión pueden volver a subir otro curso actualizado.

Manuel Sandoya

student•

La documentación sobre alineamiento con flex que ya viene incluido en la versión alpha-6 de Bootstrap 4 está aquí: https://v4-alpha.getbootstrap.com/layout/grid/#alignment

En esto caso, para alinear al centro, hay que utilizar la clase .align-items-center al lado de row, así:

<div class="container">
        <div class="row align-items-center">
          <div class="col">
            <h1>Platzishop</h1>
          </div>
          <div class="col">
            <a href="#">Login</a>
          </div>
        </div>
      </div>

Nota: col-xs ya no se utiliza, ahora es col simplemente (para el resto de breakpoints si es necesario especificar, p. ej.: col-sm, col-md, col-lg, etc)

Jose Andres Gonzalez Guevara

student•

Grillas Flex

Las grillas de tipo flex no son soportadas para los navegadores antiguos, es la mejor opción para la posición de elementos y su alineamiento

Alineamientos verticales Filas

flex-items-[dimensión]-middle: Alineamiento en el centro
flex-items-[dimensión]-top: Alineamiento arriba
flex-items-[dimensión]-button: Alineamiento abajo

Alineamientos horizontales Filas

flex-items-[dimensión]-left: Alineamiento izquierda
flex-items-[dimensión]-right: Alineamiento derecha
flex-items-[dimensión]-center: Alineamiento centro
flex-items-[dimensión]-between: Alineamiento a los lados (izquierda y derecha)
flex-items-[dimensión]-around: Alineamiento alrededor (izquierda y derecha)

Alineamientos verticales Columnas

flex-[dimensión]-middle: Alineamiento en el centro
flex-[dimensión]-top: Alineamiento arriba
flex-[dimensión]-button: Alineamiento abajo

Alineamientos horizontales Columnas

text-[dimensión]-left: Alineamiento izquierda
text-[dimensión]-right: Alineamiento derecha
text-[dimensión]-center: Alineamiento centro

Cesar David Ramírez Dimaté

student•

Lástima que todo esto ya no aplique para Bootstrap 4.1.1

Andrea Angelica Fernandez Villa

student•

En la version 4.0 de Bootstrap las clases para las Grillas Flex se implementan de diferente forma:

para alinear al centro todos los elementos de la fila se utiliza la clase .align-items-center
Para alinear al centro los elementos de una columna se utiliza la clase .align-self-center

Todo esto viene en la documentacion de Bootstrap.
No es necesario que se aprendan todas las clases de todas las versiones, para eso esta la documentacion y si trabajan solo con una version las empezaran a recordar con mayor facilidad.

Cesar David Ramírez Dimaté

student•

Así es, en vez de flex-xs-bottom sería align-self-end.

Miguel Zamora

student•

<header class="header-container">
      <div class="container">
<!--container (deja un margen responsivo) container-fluid (siempre ocupa el maximo)-->
        <div class="row">
<!--Desde 2017 col-xs-X pasa a ser col-X -->
<!--class="offset-xs-2 hace un hueco a la izq de 2 cols-->
<!--con el comando push-sm-X o pull-sm-5 podemos reordenas las columnas -->       <div class="col-6 columna">
            <h1>PlatziShop</h1>  
          </div>
<!-- para poder alinear verticalmente un elemento align-self-center-->
          <div class="col-6 columna align-self-center text-right">
            <a href="#">Login</a>
          </div>        
        </div>
      </div>
    </header>

Sergio Zapata Donado

student•

Gracias, tu aporte me ayudo a adaptarme a los cambios.

Sebastian Vasquez Rodriguez

student•

Ojo con el alinear para esta versión se utiliza flex-items-xs-middle
En la actual es con d-flex align-items-center

Daniel Hernandez

student•

Este curso necesita actualizarse, por lo tanto, podriamos decir que esta obsoleto

Sergio Zapata Donado

student•

Para los que están en la versión 4.x

<!-- Header -->

    <header id="header-container">
        <div class="container">
            <div class="row">
                <div class="col-8 col-sm-6 colum">
                    <h1>Watch Store</h1>
                </div>
                <div class="col-4 col-sm-6 text-right align-self-center colum">
                    <a href="#">Login</a>
                </div>
            </div>
        </div>
    </header>

    <!-- / Header -->

Y si quieren que en tamaño medio se ponga en el centro pueden usar la clase align-self-md-center. El css no lo he tocado mucho

body {
  font-family: 'Montserrat', sans-serif;
}

#header-container {
    background-color: #99c84a;
    color: white;
}

.colum {
    border: 1px solid red;
}

La clase “colum” la tengo solo para ver como van quedando las columnas.

Jose L. Figueroa

student•

Para la versión 4.1 de Bootstrap (Agosto 2018) utilizando **Flex **tenemos lo siguiente:

Alineación de todos los elementos de una fila:

align-items-[alineación(center / bottom)]

Alineación de elementos de una sola columna:

align-self-[alineación(center / bottom)]
**
Alineación Horizontal**
justify-content-[start / center / end / around / between]

Alineación de textos
text-[dimensión]-[right / center /left]

Diego Ramirez

student•

flex-xs-middle(bottom,top) Solucionar alineamiento.

Loredana Ursu

student•

En la version Alpha 6 de Bootstrap 4 las grillas flex no funcionan.

Gerardo Andrés Celis Arcos

student•

porque las opciones que presentan acá ya no sirven… se deben usar las siguientes:

https://v4-alpha.getbootstrap.com/utilities/flexbox/

Alex

student•

Aviso: a dia 05/09 es necesario requerir bootstrap, o al menos para mi lo ha sido. Si borraba el link, no funcionaba. Yo lo dejaria por si acaso

EP Development

student•

La parte del alineamiento con flex-items-xs-middle ya no funciona, a mi me funciono con align-self-center, siguiendo la documentacion de este link que proveyo garcosc
https://v4-alpha.getbootstrap.com/utilities/flexbox/

EP Development

student•

este es el codigo que yo saque para la version 4 final de bootstrap del ejemplo de sasha sobre grillas flex

<header id=“header-container”>
<div class=“container”>
<div class=“row d-flex align-items-center justify-content-between”>

      <!--<div class="col-5 order-2 order-md-0 columna">
        Hola
      </div>
      <div class="col-5 offset-2 columna">
      <div class="col-5 order-1 order-md-0 columna">
        Mundo
      </div>-->

      <div class="col-3">
        <h1>Platzishop</h1>
      </div>
      <!--<div class="col-3 align-self-center columna">-->
      <div class="col-3 text-right text-md-center text-lg-left">
        <a href="#">Login</a>
      </div>
    </div>
  </div>
</header>

Cesar David Ramírez Dimaté

student•

Pero text-left no tiene el mismo comportamiento de flex-items-xs-left…

Cesar David Ramírez Dimaté

student•

Ya lo encontré, debe ser d-flex justify-content-start porque deseo es mover las columnas, no el texto.

Alejandro Sulbaran

student•

con la salida de la version 4.0.0-beta casi todo lo que se dice en el curso quedo obsoleto

Leonel Vega Vargas

student•

Donde puedo descargar el codigo de los dos proyectos completos tanto Platzishop como Platzipalooza?

José Luis Luna Rubio

student•

Pues aca te dejo el link de mi repo del proyecto de platzipalooza :D en github y githubPage

Leonel Vega Vargas

student•

Hey muchas gracias amigo si pudieras con bootstrap tambien te lo agradeceria mucho.

Antoni Pierres Portocarrero Bustamante

student•

¿Con qué comandos has generado ese código?

Hanmilton Berrezueta

student•

Al final del curso como contenido bonus esta como personalizar bootstrap puedes seguir con el link.

https://platzi.com/clases/fw-frontend/concepto/contenido-complementario1202/personalizando-bootstrap/material/

Diego Andres Cardenas Caro

student•

Creo que Bootstrap Alpha 6 complica todo el tema de flexbox. Me resulta mas sencillo el posicionamiento natural de Flexbox que con la cantidad de clases que usa bootstrap para hacer el flexbox.

Fernando Gonzales

student•

Chicos una pregunta

En el min 9:27 porque el texto del <h1> se desborda del div col-xs-3?

Daniel Hernandez

student•

Existen varios problemas con Bootstrap y Flexbox dentro de este curso, ya que con la nueva versión alpha de Bootstrap v4, han cambiado ciertas cosas que en el curso no se muestran

Grillas Flex con Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman