Item properties explanation

Author: Cristina Fernández Sanz

README.md

@@ -112,6 +112,220 @@ The first 3 exercises were exported as zip from my [Codepen collection](https://
 
   - [Demo](https://cristinafsanz.github.io/css-flexbox-gridlayout/flexbox/6.exercise-4-with-flexbox-header-with-menu/index.html)
 
+### Item properties
+
+[Class: Item properties](https://escuela.it/cursos/taller-profesional-flexbox/clase/practica-y-ejemplos-ii)
+
+- 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
+
+![Exercise 5 image](images/flexbox/exercise-5.png?raw=true)
+
+  - [Code](flexbox/7.exercise-5-search-box)
+
+    ```
+    .input-wrapper {
+      display: flex;
+    }
+    input {
+        flex-grow: 1;
+    }
+    ```
+
+  - [Demo](https://cristinafsanz.github.io/css-flexbox-gridlayout/flexbox/7.exercise-5-search-box/index.html)
+
+### Exercise 6
+
+![Exercise 6 image](images/flexbox/exercise-6.png?raw=true)
+
+Si hay contenido mayor al alto hará scroll y el footer se mantiene abajo y si no lo hay también.
+
+  - [Code](flexbox/8.exercise-6-sticky-footer)
+
+    ```
+    .app {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    main {
+      flex-grow: 1;
+    }
+    ```
+
+  - [Demo](https://cristinafsanz.github.io/css-flexbox-gridlayout/flexbox/8.exercise-6-sticky-footer/index.html)
+
+### Exercise 7
+
+![Exercise 7 image](images/flexbox/exercise-7.jpg?raw=true)
+
+  - [Code](flexbox/9.exercise-7-fixed-header-footer)
+
+    ```
+    .app {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    main {
+      flex-grow: 1;
+      overflow: auto;
+    }
+    header,
+    footer {
+      height: 7rem;
+      flex-shrink: 0;
+    }
+    ```
+
+  - [Demo](https://cristinafsanz.github.io/css-flexbox-gridlayout/flexbox/9.exercise-7-fixed-header-footer/index.html)
+
+### Exercise 8
+
+Main no debería contener navs, footer...por semántica. Se va usar por eso un div.
+
+![Exercise 8 image](images/flexbox/exercise-8.jpg?raw=true)
+
+  - [Code](flexbox/10.exercise-8-holy-grail-layout)
+
+    ```
+    .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](https://cristinafsanz.github.io/css-flexbox-gridlayout/flexbox/10.exercise-8-holy-grail-layout/index.html)
+
+### Exercise 9
+
+Mejor empezar con mobile (mobile first) aunque aquí se haga al revés.
+
+![Exercise 9 image](images/flexbox/exercise-9.jpg?raw=true)
+
+  - [Code](flexbox/11.exercise-9-holy-grail-layout-responsive)
+
+    ```
+    @media screen and (max-width: 39em){
+      #main {
+        flex-direction: column;
+      }
+      nav {
+        min-height: 4rem
+      }
+    }
+    ```
+
+  - [Demo](https://cristinafsanz.github.io/css-flexbox-gridlayout/flexbox/11.exercise-9-holy-grail-layout-responsive/index.html)
+
+### Exercise 10
+
+![Exercise 10 image](images/flexbox/exercise-10.png?raw=true)
+
+  - [Code](flexbox/12.exercise-10-list-items)
+
+    ```
+    .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](https://cristinafsanz.github.io/css-flexbox-gridlayout/flexbox/12.exercise-10-list-items/index.html)
+
+### Exercise 11
+
+![Exercise 11 image](images/flexbox/exercise-11.jpg?raw=true)
+
+  - [Code](flexbox/13.exercise-11-box-columns-inside)
+
+    ```
+    .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](https://cristinafsanz.github.io/css-flexbox-gridlayout/flexbox/13.exercise-11-box-columns-inside/index.html)
+
+### TODO: 
+Falta por hacer la [última clase](https://escuela.it/cursos/taller-profesional-flexbox/clase/practicas-y-ejemplos-iv) a partir de minuto 47.
 
 ## CSS Grid Layout