Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Display Flex

40/55
Recursos

Aportes 334

Preguntas 55

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Les comparto para que practiquen con Flex:

Flexbox es una herramienta fundamental 鉂わ笍 dejo este juego que te ayuda a entender y diferenciar cada una de las propiedades que ofrece: https://flexboxfroggy.com/#es

Flexbox junto con CSS-Grid son lo m谩s importantes y 煤til de todo CSS

Cuando aprendes por primera vez Flexbox

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 鈥淢uy 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 鈥渁 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 鈥渉ijos鈥 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

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.

Comparto los apuntes de la clase 馃槂

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.

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

![](

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/

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)

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鈥endito 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

Hab铆a una vez un mundo de dise帽o web donde el protagonista, `display: flex;`, lideraba la historia. Este h茅roe por defecto, conocido por su configuraci贸n `row`, alineaba valientemente a los elementos hijos en una fila horizontal. Sin embargo, la trama se volv铆a a煤n m谩s fascinante con el misterioso poder de `flex-wrap: wrap;`. Cuando el contenedor encog铆a, los elementos que inicialmente se alineaban en fila comenzaban a organizarse en filas y columnas, adapt谩ndose a la situaci贸n con ingenio. Y as铆, en este viaje, conocimos a los aliados leales de `justify-content`. `justify-content: center;`, como un maestro zen, centraba los hijos con gracia, respetando sus m谩rgenes y dej谩ndolos en el coraz贸n del contenedor. Pero la historia no terminaba ah铆. `justify-content: flex-end;` emergi贸 como un protector de la derecha, colocando todo el contenido en ese rinc贸n. `justify-content: flex-start;` se erig铆a como el defensor de la izquierda, siempre centrando a sus aliados a la izquierda. En la trama aparecieron dos personajes peculiares: `justify-content: space-around;` repart铆a espacio equitativamente entre todos, pero con menos en los extremos. Mientras tanto, `justify-content: space-evenly;` era el estratega astuto, calculando el espacio autom谩ticamente en todo el contenedor, incluso entre los elementos. Y as铆, el cuento de `display: flex;` y sus h茅roes `justify-content` dej贸 una huella en el mundo del dise帽o, ofreciendo flexibilidad y poder a quienes se aventuraran en su reino. Fin.

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

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鈥ios 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:

馃く馃槷