Display Flex

Mini guía de flexbox:

Propiedades en contenedores padre:
display:flex;
flex-direccion: row | column | row-reverse | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
Esta siguiente propiedad es un atajo para escribir el flex-direccion y el flex-wrap en una sola línea de código
flex-flow: Primero escribes dirección | Luego escribes flex-wrap
Posicionar horizontal
justify-content: flex-star | flex-end | center | space-around | space-between
Posicionar manera vertical
aling-items: flex-star | flex-end | center | stretch | baseline

aling-content: flex-star | flex-end | center | stretch | space-around | space-between “Aling-conten solo se utiliza varias filas de elementos, pero si es una sola línea usamos aling-items”

Propiedades en elemento hijo

order: ; Esto se utiliza para cambiar el orden de nuestros elementos sin cambiar el orden real semantico y correcto de html. Sencillamente colocando números.

aling-self: aling-items: flex-star | flex-end | center | stretch | baseline “Muy importante, si en el padre del elemento tiene declarado flex-direccion:row; esta propiedad lo acomodara verticalmente. Y si es flex.direccion: column lo ordenara horizontalmente”

Flex es un tipo de display que permite que el contenedor padre sea flexible a los cambios que puedan tener los elementos hijos en su alineación.

Una vez tengamos el elemento padre con display flex tenemos otras propiedades que podremos usar para nuestro beneficio.

• Flex-direction: Te permite elegir la alineación de los elementos hijos sea en vertical (column) u horizontal (row), esta alineación viene por defecto.
• Justify-content: Esta propiedad nos permite alinear el contenido de forma horizontal
  • Valores:
    • Flex-start: Alinear items del flex desde el comienzo.
    • Flex-end: Alinear items desde el final.
    • Center: Alinear items en el centro del contenedor.
    • Space-between: Distribuir items uniformemente, el primer items al inicio, el último al final.
    • Space-around: Distribuir items uniformemente, estos tienen el mismo espacio a su alrededor.
    • Space-evenly: Distribuye uniformemente el espacio entre los items y su alrededor.
• Flex-wrap: Permite que un elemento cuyo tamaño sea mayor al de la página haga un salto de línea sin salirse del contenedor, pues este se agranda.

Un pequeño resumen

Me pone nerviosa que la pantalla no se ve completa xD

Creo que muchos ya jugaron el Flexbox Froggy. Pero pocos conocen el Flexbox Zombies. A mi opinión este otro está también super cool y muy didáctico. :wink

Chicos en Visual Studio Code, tenemos el shorcout para crear el contenerdor con su clase.
De esta forma:
Escribimos el nombre de la clase que le queremos colocar y luego presionamos la tecla tab.

.nombre-clase

Y este nos creará el contenedor directamente con la clase que le quisieramos colocar.

<div class="nombre-clase"></div>

Paso un tip de Pro-Gamer Developer, por si a alguien le interesa. Utilizando el plugin de Emmet se pueden abreviar estructuras repetitivas y complejas que a veces resultan molestas de escribir “a mano” o incluso copiando y pegando una y otra vez.

Esta herramienta ya viene instalada por defecto en VS Code y es muy fácil de instalar en otros editores de texto, sugiero leer la documentación. Con algunas pocas reglas de sintaxis sencilla se puede ahorrar mucho tiempo y esfuerzo.

Escribiendo:

(div.box$.box>p{box$})*6

Se genera la siguiente estructura HTML:

<div class="box1 box">
    <p>box1</p>
</div>
<div class="box2 box">
    <p>box2</p>
</div>
<div class="box3 box">
    <p>box3</p>
</div>
<div class="box4 box">
    <p>box4</p>
</div>
<div class="box5 box">
    <p>box5</p>
</div>
<div class="box6 box">
    <p>box6</p>
</div>

Déjame un 💚 si quieres que escriba un Tutorial de estudiante sobre esta herramienta para este curso.

En flexbox tenemos lo que se llama MAIN AXIS (eje principal) y CROSS AXIS (eje secudario) los elementos se mueven SIEMPRE en el MAIN AXIS que por defecto es de forma HORIZONTAL porque esta el FLEX-DIRECTION: ROW pero nosotros podemos cambiar que ya no este de forma horizontal con FLEX-DIRECTION:COLUMN asi el main axis esta de forma vertical y el cross axis de forma horizntal

ç

property justify-content alinea elementos horizontalmente, valores:

• flex-start: Alinea elementos al lado izquierdo del contenedor.
• flex-end: Alinea elementos al lado derecho del contenedor.
• center: Alinea elementos en el centro del contenedor.
• space-between: Muestra elementos con la misma distancia entre ellos.
• space-around: Muestra elementos con la misma separación alrededor de ellos.
• Space-evenly: Distribuye uniformemente el espacio entre los items y su alrededor.

property align-items alinea elementos verticalmente

• flex-start: Alinea elementos a la parte superior del contenedor.
• flex-end: Alinea elementos a la parte inferior del contenedor.
• center: Alinea elementos en el centro (verticalmente hablando) del contenedor.
• baseline: Muestra elementos en la línea base del contenedor
• stretch: Elementos se estiran para ajustarse al contenedor.

property flex-direction define la dirección de los elementos en el contenedor. / Permite elegir la alineación de los elementos hijos sea en vertical (column) u horizontal (row). Viene por defecto.
valores:

• row: Elementos son colocados en la misma dirección del texto.
• row-reverse: Elementos son colocados en la dirección opuesta al texto.
• column: Elementos se colocan de arriba hacia abajo.
• column-reverse: Elementos se colocan de abajo hacia arriba.

property order para agregar un orden a elementos individuales

property **flex-wrap ** especifica si los elementos “hijos” son obligados a permanecer en una misma línea o pueden fluir en varias líneas

• nowrap: Cada elemento se ajusta en una sola línea.
• wrap: los elementos se envuelven alrededor de líneas adicionales.
• wrap-reverse: Los elementos se envuelven alrededor de líneas adicionales en reversa.

property flex-flow es una combinación de flex-direction y flex-wrap. Acepta un valor de cada una separada por un espacio. Permite establecer filas y envolverlas.

property align-content determina el espacio entre las líneas, mientras que align-items determina como los elementos en su conjunto están alineados dentro del contenedor. Cuando solo hay una línea align-content no tiene efecto.

• flex-start: Las líneas se posicionan en la parte superior del contenedor.
• flex-end: Las líneas se posicionan en la parte inferior del contenedor.
• center: Las líneas se posicionan en el centro (verticalmente hablando) del contenedor.
• space-between: Las líneas se muestran con la misma distancia entre ellas.
• space-around: Las líneas se muestran con la misma separación alrededor de ellas.
• stretch: Las líneas se estiran para ajustarse al contenedor.

property align-self permite los mismos valores de align-items. Se usa para un elemento específico

Nota que cuando estableces la dirección a una fila invertida o columna, el inicio y el final también se invierten.

Creo que no hay mejor guía para aprender Flexbox como lo es Flex Cheatsheet
No olviden que la Practica hace al maestro.
Asi que no se preocupen si no entienden a la primera.
Es cuestión de estudiar unas tras otra.
Hacer muchas paginas y cuando menos vean, ya seran unos expertos.

Otra forma de practicar es con el maravilloso juego de Flexbox-Froggy

![](

Recién entré al mundo del desarrollo y vaya que se me ha hecho difícil este reto. 😦

La guia en formato imagen tomada de la pagina css-tricks.com para tenerla de referencia:

.

Ayer hice el reto del layout y me tardé horas. Me costó sangre, sudor y lágrimas. Ahora que me muestran flexbox, lloro de igual forma, pero de alegría. No puedo, sin embargo, evitar sentirme en el fondo, algo traicionado como si de mi se hubieren burlado el día de ayer. :p

The Complete Flex Layout Editor & Source Code Generator

CSS Flexbox Cheatsheet

Con flex.

Orale… y muchos profes se la complicaban explicando esto… y pum llega el profe degranda y en 15 minutos me voló la cabeza.

😅😅
.

Notas de la clase

En el editor hay opciones flex o flexbox e inline-flex o inline-flexbox. ¿Hay alguna diferencia práctica?

En el inspector te da la opción de modificar flex

Comparto los apuntes de la clase 😃

Hay Flex, lo que te extrañe la clase anterior, jaja.

Reto cumplido!!

Cosas a considerar para aprender mejor flexbox: diferenciar entre el elemento padre y el elemento hijo.

• El elemento padre tendrá hijos flexibles y tiene sus propias propiedades para establecer la distribución (de izquierda a derecha, de arriba a abajo, etc.) de los elementos hijos en su interior.
• Los elementos hijos tienen propiedades diferentes al padre y estas sólo los afecta a ellos mismos, es decir de manera individual.
  Al momento de declarar un elemento con diplay: flex; los elementos hijos se alinean por defecto en fila (de izquierda a derecha). Y los elementos hijos se ajustarán para rellenar el espacio.
  Y lo más importante:
• El modelo flexbox trabaja en dos ejes, el principal y el cruzado. Imagina un plano cartesiano con dos ejes: x, y. En base a esos ejes es que se distribuye todo el contenido dentro del elemento padre. Por eso es importante diferenciar el padre del hijo. Ya con eso tienes mucho camino recorrido.
  Espero le ahorre tiempo a alguien.
  Más info aquí

Les comparto unas lecturas complementarias para entender mejor FLEX

Click aqui para consultar una guía de flexbox

Guia flexbox en Español

Obviamente el juego de la ranita 🐸

Clase 40 - Display Flex

¿Cómo se le conoce al display flex?

• Display box.

¿Para qué nos sirve el display flex?

• Para hacer un layout más flexible o responsive.

¿Qué necesitamos para poder usar la regla display:flex?

• Un contenedor principal.

¿Cuál es el comportamiento de los elementos hijos cuando le ponemos a su elemento padre la regla display: flex?

• Esto hará que sin importar que los elementos hijos tengan un display block, estos se puedan posicionar uno seguido del otro, además de ser necesario el ancho de sus elementos hijos se reducirá de ser necesario.

¿Para qué nos sirve la propiedad flex-direction?

• Con esta propiedad podemos manipular el posicionamiento vertical u horizontal de los elementos hijos de un elemento padre.

¿Cuáles son los posibles valores que puede tener la propiedad flex-direction y que hace cada uno de ellos?

• Row:
• Sintaxis:

flex-direction: row;

• Función: Este valor es el que tiene por defecto el display flex, y nos permite ubicar de manera horizontal nuestros elementos hijos.

• Column:

• Sintaxis:

flex-direction: column;

• Función: Este valor nos permite ubicar nuestros elementos hijo de manera vertical.

• Row-reverse:

• Sintaxis

flex-direction: row-reverse;

• Función: Este valor nos permite ubicar nuestros elementos hijos de manera horizontal pero en sentido contrario, es decir primero nos renderizar el último elemento hijo que esté dentro del elemento padre.

• Column-reverse:

• Sintaxis:

flex-direction: column-reverse;

• Función: Este valor nos permite ubicar nuestros elementos hijos de manera vertical pero en sentido contrario, es decir, de arriba hacia abajo primero nos renderiza el último elemento que está dentro de nuestro elemento padre.

¿Para qué nos sirve la propiedad flex-wrap?

• Esta propiedad nos permite hacer que nuestro elemento padre sea mucho más flexible, lo cual hace que los elementos hijos que nos puedan caber en el espacio disponible, se rendericen debajo.

¿Cuáles son los posibles valores que puede tener la propiedad flex-wrap y qué hace cada uno de ellos?

• Wrap:
• Sintaxis:

flex-wrap: wrap;

• Función: Nos permite hacer que los elementos hijo se ubiquen debajo del otro en caso de que el espacio disponible les impida ubicarse uno al lado del otro.

• Nowrap:

• Sintaxis:

flex-wrap: nowrap;

• Función: Este es el valor por defecto de la propiedad flex-wrap, y su función es hacer que los elementos no se rendericen debajo de los demás en caso de que su elemento padre sea más pequeño y no permita que se ubiquen correctamente todos sus elementos hijo.

• Wrap-reverse:

• Sintaxis:

flex-wrap: wrap-reverse;

• Función: Este valor nos permite hacer que los elementos hijo se ubicar encima de los demás en caso de que el espacio disponible les impida ubicarse uno al lado del otro.

¿Para qué nos sirve la propiedad justify-content?

• Esta propiedad nos permite alinear los elementos hijo de manera horizontal.

¿Cuáles son los posibles valores que puede tener la propiedad justify-content y qué función tienen?

• Center:
• Sintaxis:

justify-content: center;

• Función: Este valor nos permite centrar de manera vertical los elementos hijo dentro de su elemento padre.

• Flex-end:

• Sintaxis:

justify-content:flex-end;

• Función: Este valor nos permite ubicar de manera vertical los elementos hijos en la parte final de su elemento padre.

• Flex-start:

• Sintaxis:

justify-content: flex-start;

• Función: Este es el valor por defecto de esta propiedad y nos permite ubicar a los elementos hijo al comienzo de su elemento padre.

• Space-around

• Sintaxis:

justify-content: space-around;

• Función: Este valor nos permite darle a los elementos hijo un espacio hacia los lados, pero se debe de tener en cuenta que los elementos hijo del comienzo y al final tendrán un espacio menor hacia el lado izquierdo y derecho respectivamente, esto es porque los espacios dados a los elementos hijo se suman y no se superponen.

• Space-evenly

• Sintaxis:

justify-content: space-evenly;

• Función: Este valor nos permite agregar un mismo espacio a los elementos hijo en sus lados para poder separarlos uniformemente.

para los que no les quede claro de ahora en adelante siempre va a tener una etiqueta contenedora y a esta se le agregaría display Flex gracias a esto los elementos contenidos en la etiqueta contenedora obtendrán la propiedad flexible

Lo logré el froggy.

Flex-Box

Funciona para que los hijos tengan un comportamiento diferente, pese a tener un display:block . Se usa con la propiedad y valor display:flex en el padre.

Justify-content

Es una propiedad que permite alinear elementos horizontalmente. Acepta los valores:

• flex-start: Alinea elementos al lado izquierdo del contenedor.
• flex-end: Alinea elementos al lado derecho del contenedor.
• center: Alinea elementos en el centro del contenedor.
• space-between: Muestra elementos con la misma distancia entre ellos.
• space-around: Muestra elementos con la misma separación alrededor de ellos.

Align-items

Es una propiedad que alinea elementos verticalmente. Acepta los valores:

• flex-start: Alinea elementos a la parte superior del contenedor.
• flex-end: Alinea elementos a la parte inferior del contenedor.
• center: Alinea elementos en el centro (verticalmente hablando) del contenedor.
• baseline: Muestra elementos en la línea base del contenedor
• stretch: Elementos se estiran para ajustarse al contenedor.

Flex-direction

Define la dirección de los elementos en el contenedor. Puede tener los siguientes valores:

• row: Elementos son colocados en la misma dirección del texto.
• row-reverse: Elementos son colocados en la dirección opuesta al texto.
• column: Elementos se colocan de arriba hacia abajo.
• column-reverse: Elementos se colocan de abajo hacia arriba.

Order

Sirve para reordenar los elementos, por defecto tienen un valor de 0, pero podemos utilizar valores enteros negativos y positivos.

Align-self

Se utiliza para elementos individuales, acepta los mismos valores que align-items

Flex-wrap

Se usa para la distribución de elementos. Puede contener estos valores:

• nowrap: Cada elemento se ajusta en una sola línea.
• wrap: los elementos se envuelven alrededor de líneas adicionales.
• wrap-reverse: Los elementos se envuelven alrededor de líneas adicionales en reversa.

Flex-flow

Es una propiedad que da facilidad para el uso en conjunto de la propiedad flex-direction y flex-wrap , los valores para cada uno están separados por un espacio. Por ejemplo flex-flow: wrap column

Align-content

Se usa para establecer como las múltiples líneas están separadas unas de otras. Valores aceptados:

• flex-start: Las líneas se posicionan en la parte superior del contenedor.
• flex-end: Las líneas se posicionan en la parte inferior del contenedor.
• center: Las líneas se posicionan en el centro (verticalmente hablando) del contenedor.
• space-between: Las líneas se muestran con la misma distancia entre ellas.
• space-around: Las líneas se muestran con la misma separación alrededor de ellas.
• stretch: Las líneas se estiran para ajustarse al contenedor.

Esto puede ser confuso, pero align-content determina el espacio entre las líneas, mientras que align-items determina cómo los elementos en su conjunto están alineados dentro del contenedor. Cuando hay solo una línea, align-content no tiene efecto.

Recomiendo una extensión de Visual Code:
https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet

Una herramienta util es la propiedad flex-basis.
Esta propiedad nos ayuda a que los elementos se distrubyan parejos.

<code>
p{
flex-basis: 25%;
} 

Es importante que los elementos no tengan height ni width para que funcione la propiedad.

Les comparto una página que hice explicando este tema gráficamente.

https://codepen.io/yair-lira/pen/LYZVJdd

Me tomó mucho hacerlo, hay muchas cosas que debo mejorar e interiorizar. Aún asi, el haberlo conseguido es una gran victoria para mí.

Cuando tienes a la vista como se acomodan los elementos con la propiedad justify-content, empiezo a entenderlo mejor.

¡comparto este sitio muy bueno para practicar flex!
es muy bueno, se llama flexbox froggy
https://flexboxfroggy.com/#es

DisplayFlex en CSS

Propiedades en contenedores padre:

• display:flex;
• flex-direccion: row | column | row-reverse | column-reverse
• flex-wrap: nowrap | wrap | wrap-reverse

Esta siguiente propiedad es un atajo para escribir el flex-direccion y el flex-wrap en una sola línea de código:

• flex-flow: [dirección] [flex-wrap]

Posicionar horizontalmente:

• justify-content: flex-star | flex-end | center | space-around | space-between

Posicionar verticalmente:

• align-items: flex-star | flex-end | center | stretch | baseline
• align-content: flex-star | flex-end | center | stretch | space-around | space-between

Nota: align-content se utiliza solo para varias filas de elementos, pero si es una sola línea se utiliza align-items.

Propiedades en elementos hijo:

• order: [número] (para cambiar el orden de los elementos sin cambiar el orden semántico del HTML)
• align-self: flex-star | flex-end | center | stretch | baseline (muy importante si el padre tiene declarado flex-direccion: row para acomodar verticalmente, o si es flex-direccion: column para acomodar horizontalmente)

![](

resultado del desafío anterior, costo un poco estuve cabezon xD

Chequen este juego colegas!

Actualmente en chrome, se cuenta con una herramienta para probar las distintas propiedades de flex, esta aparece en el inspector de elementos una vez definimos un display flex

En las versiones más recientes de chrome, ya podemos encontrar directo en la consola de inspect una forma bastante útil de manipular las distintas opciones de flexbox con el efecto que provocará en el container donde se esté aplicando:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>   
        <h1>logo</h1>    
        <nav class="header-nav">
            <div><a href="">Home</a></div>
            <div><a href="">Cursos</a></div>
            <div><a href="">instrucciones</a></div>
            <div><a href="">Blog</a></div>
        </nav>
    </header>
    <main>
        <aside>
            <nav class="aside-nav">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </nav>
        </aside>
        <article>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed possimus nihil voluptate. Voluptatem et, culpa aut qui atque dolores sequi commodi ipsa doloribus asperiores autem quidem aliquid accusantium velit consequuntur!</p>
        </article>
    </main>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

header {
    background-color: grey;
    display: flex;
    width: 100vw;
    height: 12vh;
    justify-content: space-between;
}

main {
    background-color: coral;
    display: flex;
}
aside {
    width: 15vw;
}

nav a {
    text-decoration: none;
    padding: 1rem;
}

/* clases */

.header-nav {
    display: flex;
}

.aside-nav {
    height: 100vw;
    width: 15vw;
    background-color: rgb(255, 0, 140);
    display: flex;
    flex-direction: column;
}

.aside-nav div {
    background-color:rgb(153, 148, 148);
    padding: 3rem;
    margin: 1rem;
    justify-content: center;
    width: 18rem;
    height: 14rem;
}

• display flex, permite crear diseños más responsivos, es elástico responsive.
• flex-direction, puede ser row (default), row-reverse, column, column-reverse.
• flex-wrap, se acomoda al espacio del navegador
• justify-content, alinea el contenido de forma horizontal, puede ser flex-start, center, flex-end, space-around, space-evenly.

| 10px=1 rem

Por si le ayuda a alguien
En el inspector de elementos hay la opcion qure puedes ir provando varias de las propiedades de DISPLAY-FLEX
Puedes probarlos uno por uno para ver como se modifican.
A mi me ayudo mucho.

Cuando Diego al inicio habla de los problemas que pudimos haber tenido en el desafío anterior me sentí super identificado, quise llorar. 😪

Amigos si conocen inglés les dejo esta página como referencia para flex, muy buena y muy visual

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Así quedó mi reto, tuve que complementar con videos de youtube.

En resumen flexbox es una propiedad de CSS que nos permite controlar los elementos html de una manera flexible.

Requiere de un contenedor padre (contenedor flex) y sus hijos (items flex) que se puede modificar.

Además al trabajo con elementos padre e hijos, existen propiedades especificas para cada uno de ellos

Fue demasiada información valiosa en poco tiempo.
Tremenda clase!

Layout 1 con display Flex…bendito display flex

Recomiendo esta paina, me ha ayudo mucho…
https://www.w3schools.com/css/css_display_visibility.asp

Aaaaa! Siempre ay que tener un container principal que tenga display flex para que nos ayude a cambiar las cosaaas! aaaaa era asi!

Encontre este otro juego que es muy entretenido para flexbox
https://codingfantasy.com/games/flexboxadventure/play

Reto completado con Flex :3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desafio Layout</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <figure class="Logo">Logo</figure>
        <nav class="container">
                <ul class="container__nav">
                    <li>Home</li>
                    <li>Cursos</li>
                    <li>Instructores</li>
                    <li>Blog</li>
                </ul>
        </nav>
    </header>
    <main>
        <aside class="Main__aside">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </aside>
        <div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus magni minima laboriosam dicta sed cum aliquid aliquam! Aliquid laboriosam illum dicta vero similique assumenda alias enim voluptatibus eos odit? Inventore!
            Ipsa, molestiae minima. Magnam eum explicabo ipsum dicta voluptas impedit a, error pariatur odio laborum aperiam ipsa nulla ratione in rerum iusto ab ullam debitis distinctio possimus fugiat rem tenetur.
            Rerum fugiat numquam ipsum nulla voluptates? Natus, nostrum obcaecati id excepturi explicabo quisquam dolorum minus ipsam impedit neque rem sequi vel quam delectus sunt quod illum! Autem magni obcaecati laborum.</p>
        </div>
    </main>
    <footer class="Footer">
        <div class="Footer__div">Fax: 666-4785</div>
        <div  class="Footer__div">Facebook</div>
        <div  class="Footer__div">Instagram</div>
        <div  class="Footer__div">Telefonos: 8661478 - 26637846</div>
    </footer>
</body>
</html>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
header {
    display: flex;
    background-color: rgb(213, 195, 230);
    justify-content: space-between;
}
.Logo {
    padding: 1rem;
}
.container {
    display: flex;
    
}

.container__nav {
    display: flex;
    width: 20vw;
    list-style: none;
    padding: 1rem;
    justify-content: space-evenly;
}          


main {
    display: flex;
    background-color: rgb(184, 179, 179);
    width: 100%;
    height: 100%;
}
.Main__aside {
    background-color: salmon;
}
.box {
    background-color: rgb(231, 175, 231);
    width: 20rem;
    height: 12.2rem;
    margin: 3rem;
}

footer {
    background-color:rgb(250, 157, 146);
    display: flex;
    justify-content: center;
    height: 6vh;
}
.Footer__div {
    padding: 1rem 1rem;
} 

Flex ayudaría mucho en el reto haha 😅

Las horas que me hubiera ahorrado con el flex jajaja, pero ahora a aprovecharlo

Me falta el stretch. Alguien que colabore

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 2</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main-container">
        <div class="container-item container1 ">
            <div class="item itemA"><p>A</p> </div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container2">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container3">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container4">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container5">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container6">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container7">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
        <div class="container-item container8">
            <div class="item itemA">A</div>
            <div class="item itemB">B</div>
            <div class="item itemC">C</div>
        </div>
    </div>
</body>

</html>

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html
{
    font-size: 62.50%;
}

body {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}

.main-container {
    display: flex;
    flex-direction: row;

}

.container-item {
    display: flex;
    flex-direction: column;
    border: 0.2rem solid black;
    height: 40rem;
    width: 10rem;
}

.container1 {
    justify-content: flex-start;
}

.container2 {
    justify-content: flex-end;
}

.container3 {
    justify-content: center;
}

.container4 {
    justify-content: space-between;
}

.container5 {
    justify-content: space-around;
}

.container6 {
    justify-content: space-around;
}

.container7 {

    align-items: stretch;
}

.container8 {
    justify-content: space-evenly;
}

.item {
    margin: 0.8rem;
    padding: 0.1rem;
    background-color: cadetblue;
    border-radius: 0.3rem;
    text-align: center;
}

.itemA {
    height: 4rem;
}

.itemB {
    height: 10rem;
    width: calc(100% - 5rem);
}

.itemC {
    height: 5rem;
    width: calc(100% - 3rem);
}

.container6 .itemB {
    height: 3rem;
}

En vez de utilizar:

html {
            font-size: 62.5%;
        }

Les recomiento usar:

html {
            /* 10 pixeles */
            font-size: x-small;
        }

x-small equivale a 10px y es más fácil de recordar.

Desde que comencé este curso siempre tenía el problema de que al hacer el header, los textos se juntaban (al momento de probarlo con una dimensión pequeña) y daban un resultado raro, pero gracias a esta clase pude solucionarlo y aquí están unas pruebas que acabo de hacer:

Bajo la vista de una PC:

Bajo la vista de una celular pequeño (iphone 5)

Me siento feliz 😄

Flexbox es un conjunto de propiedades que nos permiten distribuir nuestros elementos de una forma flexible para mejores layouts / plantillas o diseños mas facilmente

Para utilizar flexbox necesitamos un contenedor padre que tenga elementos hijos. Ya que a estos son los que se haran flexiblex.

Flexbox se divide en 2 grupos de propiedades:

• Propiedades para los elementos padre
• Propiedades para los elementos hijo

=================================
Propiedades del contenedor padre:

• display:flex;
  Nos permite habilitar que los elementos hijos sean flexibles

• flex-direction:;
  row | row-reverse | column | column-reverse

• flex-wrap:;
  no-wrap | wrap | wrap-reverse

• flex-flow: <flex-direction> || flex-wrap;
  Es un atajo de flex-direction y flex-wrap.

• justify-content:;
  flex-start | flex-end | center | space-between | space-around

• align-items:;
  flex-start | flex-end | center | stretch | baseline

• align-content:;
  IMPORTANTE: Esta propiedad solo funciona cuando hay mas de una linea de elementos.

  flex-start | flex-end | center | stretch | space-between | space-around

=================================
Propiedades de los elementos hijo

• order:;

• flex-grow:;
  Acepta un numero que servira de proporcion para hacer crecer el elemento en relacion a los otros.

  Si todos los elementos tienen flex-grow 1 el espacio restante se distribuira entre los elementos.

• flex-shrink:;
  Define la habilidad de un elemento para hacerse mas pequeño.

  Por defecto todos se pueden hacer mas pequeños pero si le ponemos flex-shrink 0 el elemento no podra ser mas pequeño que su ancho especificado.

• flex-basis:;
  Nos permite especificar el valor inicial que tendra un elemento.

• flex:1 1 auto;
  Es un atajo para flex-grow, flex-shrink y flex-basis

• align-self:;
  auto | flex-start | flex-end | center | baseline | stretch;

Recomiendo estas paginas, ayudan a complementar conceptos. la #2 ayuda a comprender mejor la dinámica de cada una de las propiedades.

1. Flexbox properties
2. Flexbox css

Me fue mal en el desafío. Intento hacer todo lo que acá enseñan pero no doy.

xD después de horas de frustración con el desafió pasado la respuesta estaba en el siguiente vídeo

Flex: Nos permite distribuir el espacio entre los elementos/contenedores de nuestra página web, por el contrario que grid, flexbox es unidimensional, trabaja con filas o columnas, pero solo una de cada una. Para usar flex siempre debemos tener un contenedor padre el cual usará el display flex.

La configuración inicial de CSS que debemos poner siempre que queramos usar REMs como 1 REM = 10px es: * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } body { font-size: 1.6rem; }

The Flex Space-Between

The Flex Space-Around

The Flex Justify-Content center

Nmms, creo que me hubiera ahorrado casi la mitad de css si hubiera visto esta clase antes T-T

Guía: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Se que aun no hemos visto CSS Grid (si es que estamos siguiendo la ruta) pero les dejo un pequeño tip de cuando debemos usar display flex o grid:

Flexbox: Se utiliza (debería ser utilizado) para acomodar elementos dentro de cajas
Grid: Se utiliza para dar estructura (el famoso layout)

ME QUEDO ASI, y si me costo sin FLEX XD

😄
Recursos importantes:

• Flexbox
• CSS flex-direction Property
• CSS flex-wrap Property
• CSS justify-content Property

primero nos hacen sufrir con un reto y luego nos dan la herramienta para hacerlo de la manera sencilla :’)
estresante, pero igualmente efectivo, creo que pude aplicar bastante bien el tema de position e inline-block

Flex-> flexible

Flexbox Froggy < Flexbox Zombies

1. usando flex-box

.parent{
display:flex;
justify-content:center;
aling-items:center;
}

1. usando margin

.child{
margin:auto;
}

sufrí mucho con reto pasado ya que no se colocaba el mamin a la derecha pero ahora lo intente con el display flex y funciono perfecto

RESUMEN CLASE 40:
DISPLAY FLEX

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main class="container">
        <div class="box1 box">
            <p>box1</p>
        </div>
        <div class="box2 box">
            <p>box2</p>
        </div>
        <div class="box3 box">
            <p>box3</p>
        </div>
        <div class="box4 box">
            <p>box4</p>
        </div>
        <div class="box5 box">
            <p>box5</p>
        </div>
        <div class="box6 box">
            <p>box6</p>
        </div>
    </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
.container {
    border: 0.3rem solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.box {
    width: 10rem;
    height: 10rem;
}
.box1 {
    background-color: blue;
}
.box2 {
    background-color: blueviolet;
}
.box3 {
    background-color: burlywood;
}
.box4 {
    background-color: cadetblue;
}
.box5 {
    background-color: coral;
}
.box6 {
    background-color: salmon;
}

Les dejo este pequeño pdf con una chuleta sobre css
https://drive.google.com/file/d/1WqIw3tPS6gNhEnma7iHl-PEfByKSIYGK/view

partiendome la cabeza con el reto anterior y vemos que existe display flex…Dios y lo que falta

que hermosa es la tecnología 😍

Super Esta Clase, El reto anterior estuvo muy fuerte. Creo que esta bien aprender todo para los que se quieran dedicar al Front, pero este tipo de clases si nos sirven a los que nos queremos dedicar al backend

¡Es importante saber dominar flex! Comparto mis apuntes:

Cuando implementamos display: flex en un elemento contenedor, los elementos hijos adquieren otro comportamiento, logrando posicionar cada uno de los elementos en forma lineal (fila / row), independientemente si estos elementos hijos esten implementando display: block.

Adicionalmente podemos cambiar el comportamiento de flex (flex-directiom: colum/row) para que pueda organizar los elementos en forma de columna, como tambien el orden de los mismos.

flex-wrap:wrap, Nos permite adquirir un comportamiento adaptable (responsive) respecto al tamano de la pantalla (viewport).

justify-content: center, nos permite centrar los elementos.

Mi versión del Inspector del Google Chrome pone una etiqueta “flex” en el main.
Y en el .container un botoncito con un menú con opciones de flex. Qué maravilla:

🤯😮

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Flex</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <figure class="header-logo">
            logo
        </figure>
        <nav class="header-nav">
            <ul> 
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="aside">
            <div class="aside-element"></div>
            <div class="aside-element"></div>
            <div class="aside-element"></div>
            <div class="aside-element"></div>
        </div>
        <section class="main-principal"></section>
    </main>
    <footer>
        <section class="footer-section">
            <span>Redes Sociales</span>
        </section>
    </footer>
</body>
</html>

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    font-size: 62.5%;
}
header {
    background-color: crimson;
    font-family: monospace;
    color: white;
    font-size: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0.2rem 0.2rem 1rem black;
    position: relative;
}
.header-logo {
    margin: 2rem;
}
.header-nav {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    margin: 2rem;
}
.header-nav li {
    display: inline-block;
    list-style: none;
}
main {
    width: 100%;
    height: 100%;
    display: flex;
}
.aside {
    width: 25vw;
    height: 100vh;
    background-color: rgb(206, 206, 206);
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;
    min-width: 25rem;
}
.aside-element {
    width: 15vw;
    min-width: 15rem;
    height: 20vh;
    min-height: 12rem;
    background-color: white;
    background-image:url(./img/paisaje.jpg);
}
.main-principal {
    width: 75vw;
    height: 100vh;
    background-image: url(./img/website.jpg);
}
footer {
    display: flex;
    width: 100%;
    height: 100%;
    display: flex;
    background-color: rgb(100, 100, 100);
    justify-content: center;
}
.footer-section {
    font-size: 4rem;
    color: white;
    font-family: monospace;
}

40.-Display Flex o Flex Box

Nos ayuda a poder hacer un layout de manera más responsive (más flexible). SIEMPRE debemos de tener un container principal para usar flex.

Con flex wrap si no tienen espacio se van moviendo de manera automática.

Justify-content: nos ayuda a alinear el contenido de forma horizontal.

Aqui dejo mis notas de la clase :3

• flex-direction (valor por defecto: row): Esta propiedad define las direcciones del eje principal, es decir, hacia donde se moverán los Elementos - Flex, tanto horizontalmente como verticalmente.

     **Horizontalmente**: flex-direction: row || row-reverse;
  

  Verticalmente: flex-direction: column || column-reverse;

• flex-wrap (valor por defecto: nowrap): con la propiedad flex-wrap controlamos si el contenedor flex mueve sus elementos - flex en líneas individuales o múltiples.

  Valores de flex-wrap:

  nowrap: Los elementos - flex se muestran en una fila y se pueden encoger dependiendo de su contenedor - flex.

  wrap: Los elementos - flex se muestran en varias filas (si es necesario), de izquierda a derecha y de arriba abajo.

• justify-content (valor por defecto: flex-start): alinea los elementos - flex a lo largo del eje principal de la línea actual.

  Valore de flex-wrap

  flex-start: Alinea los elementos flexibles al lado izquierdo del contenedor padre.

  flex-end: Alinea los elementos flexibles al lado derecho del contenedor padre.

  center: Alinea los elementos al centro del contenedor padre.

  space-between: Los elementos - flex tienen la misma distancia entre ellos, pero el primero y el último elemento - flex están alineados con los bordes del contenedor - flex.

  space-around: Los elementos - flex tienen la misma distancia entre ellos, incluso el primero y el último elemento - flex.

  space-evenly: Los elementos - flex tienen la misma distancia entre ellos, así como con los bordes del elemento padre.