css-flexbox-gridlayout

Use cases CSS Flexbox and CSS Grid Layout

Flexbox

• Exercises from Diana Aceves' course in Escuela IT.

The first 3 exercises were exported as zip from my Codepen collection. Each one had this setting:

• HTML without Preprocessor.

• CSS with SCSS Preprocessor and Vendor Prefixing Autoprefixer.

• External stylesheets:

  • Diana CSS Normalize

  • Font Awesome

Exercise 1

• Exercise 1 without Flexbox

  • Code

  • Demo

• Exercise 1 with Flexbox

  • Code

  .total {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  

  • Demo

Exercise 2

• Code

  .menu-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  

  • Demo

Exercise 3

• Exercise 3 without Flexbox

  • Code

  • Demo

• Exercise 3 with Flexbox

  • Code

  body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .blue-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  

  • Demo

Exercise 4: Header Throne

Inspiration

• Code

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul {
  display: flex;
}
nav li {
  padding: 0 1em;
}

• Demo

Item properties

Class: Item properties

• Cross size: Eje secundario / Cross axis

  • Si se ha definido (por width o por height), ese tamaño se respetará.
  • Si no se ha definido, se utilizará todo el espacio disponible (STRETCH).
  • Si no se ha definido y se utiliza un valor diferente de stretch para align-content o align-items en el contenedor, se tomará el tamaño de su contenido.

• Main size: Eje principal / Main axis

  • Si no se ha definido el tamaño, se calculará según el contenido.
  • si se ha definido (por width o height) éste podría respetarse, podría encogerse o crecer. // hace caso o no!
    • Si no hay espacio suficiente, por defecto los items encogen para caber dentro del contenedor.
    • Si hay espacio suficiente, por defecto no crecen, porque Flexbox quiere que le digamos cómo queremos que crezcan.

• Flex-basis: Tamaño base que se considera para los cálculos, no el tamaño definitivo.

  • Siempre gana a width o height.
  • No siempre controla el ancho, en flex-direction: column, flex-basis controla el alto.
  • Sólo funciona sobre el main-axis.
  • Flex-basis gana: si utilizo la propiedad Flex que es el shorhand de flex-grow, flex-shrink, flex-basis sobreescribiré el width sin darme cuenta.
  • En responsive es fácil que pase de flex-direction: row a column, si establezco width tendré problemas.

• Flex-grow (crecimiento)

  • Controla cuánto crece un elemento para rellenar el espacio sobrante.
  • Sólo se aplica si hay espacio disponible.
  • Es un número positivo -> unidades que crecerá.
    • Unidad = Espacio disponible / suma de flex-grows en la misma línea.
      • Que se coja el doble de hueco por ej. al usar flex-grow: 2 / flex-grow: 1. No es que una sea el doble del otro.
  • Por defecto flex-grow: 0 // no crece

• Flex-shrink (estrechamiento)

  • Si el espacio disponible es negativo (el tamaño del contenedor es menor a la suma de los tamaños de los items), por defecto los items se encogen en proporciones iguales para caber en una sola línea, pero respetando el contenido o si tiene establecido min-width o min-height.
    • Unidad = Espacio disponible (será negativo) / suma de flex-shrink en la misma línea.
  • Por defecto flex-shrink: 1 // si lo necesita, encoger
    • flex-shrink: 0 // no encoge. El que más se utiliza.
    • flex-shrink: 3 // encogerá en mayor proporción si lo necesita (al tripe de velocidad)

Exercise 5

• Code

  .input-wrapper {
    display: flex;
  }
  input {
      flex-grow: 1;
  }
  

• Demo

Exercise 6

Si hay contenido mayor al alto hará scroll y el footer se mantiene abajo y si no lo hay también.

• Code

  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main {
    flex-grow: 1;
  }
  

• Demo

Exercise 7

• Code

  .app {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main {
    flex-grow: 1;
    overflow: auto;
  }
  header,
  footer {
    height: 7rem;
    flex-shrink: 0;
  }
  

• Demo

Exercise 8

Main no debería contener navs, footer...por semántica. Se va usar por eso un div.

• Code

  .app {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  header,
  footer {
    height: 7rem;
    flex-shrink: 0;
  }
  #main {
    flex-grow: 1;
    display: flex;
  }
  nav,
  aside {
    flex-basis: 15%;
  }
  article {
    flex-grow: 1;
    overflow: auto;
  }
  

• Demo

Exercise 9

Mejor empezar con mobile (mobile first) aunque aquí se haga al revés.

• Code

  @media screen and (max-width: 39em){
    #main {
      flex-direction: column;
    }
    nav {
      min-height: 4rem
    }
  }
  

• Demo

Exercise 10

• Code

  .store {
    display: flex;
  }
  .circle {
    flex-shrink: 0;
  }
  .next {
    align-self: center;
  }
  .store-id {
    flex-basis: 20%;
    flex-shrink: 0;
  }
  .address-tpv {
    flex-grow: 1;
  }
  

• Demo

Exercise 11

• Code

  .row {
      display: flex;
      justify-content: space-between;
  }
  .info-box {
      flex-basis: 44%;
      display: flex;
      flex-direction: column;
  }
  .text-container {
      flex-grow: 1;
  }
  header {
      display: flex;
  }
  .title {
      flex-grow: 1;
  }
  

• Demo

TODO:

Falta por hacer la última clase a partir de minuto 47.

CSS Grid Layout

• Exercises from Diana Aceves' course in Escuela IT.

Exercise 1

• Code

  <div class="grid">
      <div class="grid-item item1">1</div>
      <div class="grid-item item2">2</div>
      <div class="grid-item item3">3</div>
      <div class="grid-item item4">4</div>
      <div class="grid-item item5">5</div>
      <div class="grid-item item6">6</div>
      <div class="grid-item item7">7</div>
      <div class="grid-item item8">8</div>
      <div class="grid-item item9">9</div>
      <div class="grid-item item10">10</div>
      <div class="grid-item item11">11</div>
      <div class="grid-item item12">12</div>
    </div>

  .grid {
    display: grid;
  
    /*TRACK SIZE*/
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows: 150px 150px 150px;
  
    /*GAP*/
    grid-row-gap: 1rem;
    grid-column-gap: 2rem;
    grid-gap: 1rem;
  
    /*FR UNIT*/
    grid-template-columns: 1fr 1fr 1fr 1fr;
  
    /*MIX UNITS*/
    grid-template-columns: 200px 1fr 1fr;
    grid-template-columns: 20% 1fr;
  
    /*WITH ROWS TOO */
    grid-template-rows: 1fr 1fr 1fr;
    /*but you have to set a height */
    height: 200vh;
  
    /*AUTO SIZES:*/
  
    /*Extend to rows not set explicitly */
    grid-template-rows: 150px 1fr 1fr;
    grid-auto-rows: 1fr;
  
    grid-template-rows: 150px 250px 100px;
    grid-auto-rows: 150px;
  }

  • Demo

Rock' n' Grid Wecodefest Diana Aceves

• Workshop Rock' n' Grid Diana Aceves

• Demos Codepen

• Designs: https://www.swissted.com/.

Demo 1

• Code

• Demo

• Notes:

  • Grid 4 rows and 8 columns. 11 items in total.

    • grid-template-rows: 4rem 4rem 4rem 4rem: 4 rows with 4 rem

      • same as grid-template-rows: repeat(4, 4rem)

  • At the beginning (add numbers to display them better):

  1 2 3 4 5 6 7 8
  9 10 11
  

  • Item 2: grid-column: 1: Item 2 in line 1 (better set only the needed ones and with columns)

  1
  2 3 4 5 6 7 8 9
  10 11
  

  • In this case: Only is needed to change 1 coordinate for 3 items

  1
  2
  3
  4 5 6 7 8 9 10 11
  

  • After all changes remove numbers

Demo 2