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

Flexbox layouts

41/55
Recursos

Aportes 486

Preguntas 47

Ordenar por:

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

Les recomiendo un sitio, donde se puede practicar las propiedades de Flex mediante un peque帽o juego.

https://flexboxfroggy.com/#es

Saludos 馃槃

Mi Resumen 馃槃

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.
  • Align-items: Sirve para alinear los elementos hijos de forma vertical.
    • Valores:
      • Flex-start: Se alinean desde arriba.
      • Flex-end: Se alinean desde abajo.
      • Center: Alinea los item al centro del eje y del contenedor.
      • Stretch: Estira el alto de los elementos hijos al 100% del alto del elemento padre.
      • Baseline: Escala el alto del elemento al tama帽o de su contenido.
  • 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.
  • Order: Especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estar谩n dispuestos en orden ascendente seg煤n el valor de order.
  • Flex-grow: Especifica qu茅 cantidad del espacio restante dentro del contenedor flexible, deber铆a ocupar el 铆tem en cuesti贸n seg煤n su direcci贸n principal, esta 煤ltima determinada por flex-direction.
  • Flex-basis: Especifica el tama帽o inicial de un elemento flexible.

Lo logreee!! 馃コ馃コ馃コ Me encant贸 descubrir flex

Antes

Despu茅s

Considero muy mal trabajar flexbox sin saber realmente que pasa con los algoritmos del navegador. Flexbox funciona con un main axis y cross axis (como los ejes de un plano cartesiano x,y).
En estos videos entender谩s flexbox a profundidad para que no te quiebrela cabeza tanto.
Parte 1: https://youtu.be/_YUJ37FARrU
Parte 2: https://youtu.be/v4GIqmPiLmo

Una aclaraci贸n con flex-direction: Al ocupar flex-direction las propiedades justify-content y align-items cambian su funcionamiento, es decir, si se pone un flex-direction de column鈥 justify-content ahora alinear谩 de forma vertical y align-items de forma horizontal.

Listo! mejorado el reto con el uso de flexbox

**Antes: **

Despues:


CSS Flexbox Cheatsheet (link)

Extensi贸n de VS Code que le permite abrir una hoja de trucos de flexbox directamente en el editor.
Tiene una ventana emergente flotante donde veras una descripci贸n de las propiedades de flexbox y tambi茅n colocando el mouse sobre una propiedad se muestra una imagen para cada propiedad de flexbox.

Que lo disfruten!

Su guia de confianza 馃槈

Reto cumplido
Larga vida a flexbox

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout with Flex</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="header">
    <figure class="logo">
      <img src="./images/logo.webp" alt="Logo Platzi">
      <strong>Platzi</strong>
    </figure>
    <nav class="navbar">
      <ul class="menu">
        <li>
          <a href="">Home</a>
        </li>
        <li>
          <a href="">Courses</a>
        </li>
        <li>
          <a href="">Teachers</a>
        </li>
        <li>
          <a href="">Blog</a>
        </li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <aside class="routes">
      <figure class="routes-images">
        <img src="./images/route_1.png" alt="Route">
        <img src="./images/route_2.png" alt="Route">
        <img src="./images/route_3.png" alt="Route">
        <img src="./images/route_4.png" alt="Route">
      </figure>
    </aside>
    <section class="content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum totam consequatur commodi nostrum fuga quae quam assumenda doloribus delectus dolorem! Nostrum eligendi accusamus iure ipsa ipsam illum accusantium? Magni, necessitatibus.</p>
    </section>
  </main>
  <footer class="footer">
    <p>Made with love in Platzi</p>
  </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #003049;
}
body {
  font-family: 'Open Sans', sans-serif;
}
.header {
  display: flex;
  height: 65px;
  padding: 10px;
  border: 1px solid steelblue;
  justify-content: space-between;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
}
.logo strong {
  margin-left: 5px;
  font-size: 1.6rem;
}
.menu {
  display: flex;
  list-style: none;
}
.menu li {
  margin: 0 5px;
}
.menu li a {
  text-decoration: none;
}
.main {
  display: flex;
}
.routes {
  padding: 10px;
  border: 1px solid greenyellow;
}
.routes-images {
  width: 298px;
}
.routes-images img {
  width: 100%;
  height: 82px;
}
.content {
  padding: 10px;
  border: 1px solid greenyellow;
}
.footer {
  display: flex;
  height: 50px;
  padding: 10px;
  border: 1px solid orange;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Desaf铆o Layout</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="header-container">
    <nav class="header-nav">
      <figure class="header-logo">
        <img src="./img/logo.png" alt="logo platzi" width="120px">
      </figure>
      <ul class="header-menu">
        <li><a href="#">Clases</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Foro</a></li>
        <li><a href="#">Agenda</a></li>
        <li><a href="#">TV</a></li>
      </ul>
    </nav>
  </header>
  <main class="main-container">
    <aside class="aside-container">
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
      <article class="aside-article">
        <h2 class="aside-title">Lorem ipsum, dolor sit.</h2>
        <p class="aside-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum ex dolorem modi, eum ab harum corporis numquam ipsum quo ratione velit officiis vitae aliquam maiores dolore laudantium architecto repellat inventore.</p>
      </article>
    </aside>
    <section class="section-container">
      <article class="article-container">
        <h1 class="article-title">Lorem ipsum dolor sit amet.</h1>
        <p class="article-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, a doloremque accusantium porro quidem veritatis doloribus dicta assumenda voluptates, ut, aspernatur quia delectus placeat culpa fuga nulla soluta quod quibusdam!
        </p>
        <p class="article-text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem at impedit itaque. Recusandae quas, nihil libero minus qui repudiandae consequuntur debitis aut accusantium deleniti temporibus nostrum, consequatur explicabo commodi totam!
        Nisi ipsa laudantium reiciendis earum odit rerum quas dignissimos necessitatibus provident cupiditate quasi eaque, voluptatibus minima perferendis iusto at, sed ducimus officiis impedit error, ea iure numquam omnis sit! Repudiandae!
        Dolorem, architecto quidem deserunt soluta doloribus autem quibusdam? Et amet nulla libero facere soluta culpa eaque harum alias. Debitis animi libero incidunt in! Laudantium dicta facilis maxime voluptatem nam? Mollitia!
        Quasi corporis laudantium tenetur commodi, accusantium, odit, iure animi consectetur fuga adipisci eligendi! Ea odit deleniti perferendis necessitatibus esse! Quasi voluptate officiis enim reprehenderit. Magni minus deserunt consectetur illo maxime.
        Voluptatem consequatur maxime exercitationem culpa cum facere nostrum. Velit asperiores neque libero molestias cupiditate non dolorem error nihil laudantium vero odit esse quam quod animi possimus eos numquam, voluptate doloremque.
        </p>
        <div class="article-cards_container">
          <div class="article-card html"><p>HTML5</p></div>
          <div class="article-card css"><p>CSS3</p></div>
          <div class="article-card js"><p>JS</p></div>
        </div>
      </article>
    </section>
  </main>
  <footer class="footer-container">
    <section class="footer-slogan">
      <p class="footer-text_slogan">Transformamos la econom铆a de nuestros pa铆ses entrenando a la pr贸xima generaci贸n de profesionales en tecnolog铆a.</p>
    </section>
    <section class="footer-social">
      <p class="footer-text_social">Aprende en nuestras redes:</p>
      <nav class="footer-nav">
        <ul class="footer-menu">
          <li><a href="#"><img src="./img/twitter.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/youtube.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/facebook.png" alt="Twitter" width="30%"></a></li>
          <li><a href="#"><img src="./img/instagram.png" alt="Twitter" width="30%"></a></li>
        </ul>
      </nav>
    </section>
  </footer>
</body>
</html>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: sans-serif;
  background-color: #f6f6f6;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: #b7bbc4;
}

li {
  display: inline-block;
  font-size: 1.6rem;
  list-style: none;
  color: white;
}

.header-container {
  width: 100%;
  background-color: #121f3d;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5rem;
  height: 8rem;
  flex-wrap: wrap;
}

.header-menu li {
  font-weight: bold;
  padding: 0 3rem;
}

.main-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.section-container {
  padding: 2rem;
  background-color: #f6f6f6;
}

.article-title {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.article-subtitle {
  font-size: 3rem;
  color: #b7bbc4;
  margin-bottom: 3rem;
}

.article-text {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.article-cards_container {
  display: flex;
  flex-wrap: wrap;
}

.article-card {
  width: 25rem;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  color: white;
  padding: 1rem;
  font-size: 5rem;
  border-radius: 1rem;
}

.html {
  background-color: #e45126;
}

.css {
  background-color: #0c73b8;
}

.js {
  background-color: #e4a228;
}

.aside-container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #1e5270;
}

.aside-article {
  width: 30rem;
  color: white;
  background-color: #33b1ff;
  border-radius: 0.5rem;
  padding: 2rem;
  margin: 1rem;
}

.aside-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.aside-text {
  font-size: 1.5rem;
}

.footer-container {
  width: 100%;
  color: white;
  background-color: #1c3643;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 15rem;
  padding: 0 5rem;
}

.footer-slogan {
  width: 30rem;
  font-size: 1.5rem;
}

.footer-social {
  font-size: 1.5rem;
}

.footer-text_social {
  margin-bottom: 1rem;
}

Actualic茅 con lo aprendido 馃槑:

<!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>Layout</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="cabecera">
        <nav class="nav-bar">
            <picture class="logo">
                <img class="logo-img" src="./assets/logo.png" alt="Logo Platzi">
            </picture>
            <ul class="menu">
                <li class="menu-list">
                    <a href="">Home</a>
                    <img src="./assets/logos/home.png" alt="Menu"> 
                </li>
                <li class="menu-list">
                    <a href="">Cursos</a>
                    <img src="./assets/logos/cursos.png" alt="Cursos"> 
                </li>
                <li class="menu-list">
                    <a href="">Instructores</a>
                    <img src="./assets/logos/instructors.png" alt="Instructores"> 
                </li>
                <li class="menu-list">
                    <a href="">Blog</a>
                    <img src="./assets/logos/blog.png" alt="Blog"> 
                </li>
            </ul>
        </nav>
    </header>
    <main class="contenido">
        <aside class="cursos">
            <picture>
                <img src="./assets/cursos/android.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/web.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/blandas.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/azure.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/finanzas.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/marketing.png" alt="">
            </picture>
            <picture>
                <img src="./assets/cursos/software.png" alt="">
            </picture>
        </aside>
        <article class="articulo">
            <p class="parrafo">Bienvenido a</p>
            <picture class="logo-grande">
                <img src="./assets/logo.png" alt="">
            </picture>
            <button class="boton">INGRESAR</button>
        </article>
    </main>
    <footer>
        
    </footer>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.cabecera {
    display: flex;
    height: 100%;
    width: 100%;
}
.nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    background: linear-gradient(56deg, rgba(5,14,99,1) 0%, rgba(3,1,69,1) 60%);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
.logo img{
    width: 150px;
}
.menu {
    display: flex;
    align-items: center;
}
.menu .menu-list{
    display: flex;
    font-size: 1.6rem;
    align-items: center;
    align-content: center;
    padding: 10px;
    list-style-type: none;
}
.menu-list a {
    text-decoration: none;
    color: whitesmoke;
}
.menu-list img {
    display: flex;
    height: 20px;
    padding-left: 5px;
    align-items: center;
    align-content: center;
}
.contenido {
    display: flex;
    width: 100vw;
    height: 100vh;
    padding-top: 60px;
    background: #050e63;
}
.cursos {
    display: flex;
    width: 350px;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: scroll;
}
.cursos::-webkit-scrollbar {
    width: 8px;     /* Tama帽o del scroll en vertical */
    height: 8px;    /* Tama帽o del scroll en horizontal */
}
.cursos::-webkit-scrollbar-thumb {
    background: rgba(3,1,69,1);
    border-radius: 4px;
}
.cursos img {
    width: 340px;
    padding: 5px 10px;
    border-radius: 20px;
}
.articulo {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}
.articulo .parrafo {
    font-size: 3rem;
    font-family: 'Courier New', Courier, monospace;
    color: greenyellow;
}
.logo-grande img {
    width: 400px;
}
.articulo .boton {
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: rgba(3,1,69,1);
    background-color: greenyellow;
    border-radius: 6px;
    border: 2px solid green;
}
.boton:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    background-color: rgba(3,1,69,1);
    color: greenyellow;
}

Reto cumplido 馃槂馃槂, en el primer intento no le puse muchas cosas 馃槄
SIN FLEXBOX

CONFLEXBOX

CODIGO HTML

    <header class="header">
        <div class="header__logo">
            <img src="./img/pngegg.png" alt="Logo" class="header__logo--img">
        </div>
        <div class="header__title">
            <h1>Desafio con Flexbox</h1>
        </div>
        <nav class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Cursos</a></li>
                <li><a href="#">Instructores</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <main class="content__main">
            <h2>Formulario de inscripci贸n</h2>
            <form class="content__form">
                <fieldset>
                    <legend>Datos personales</legend>
                    <label for="name" class="form__label">
                        <p>Nombre</p>
                        <input type="text" id="name" name="name" placeholder="Nombre completo">
                    </label>
                    <label for="email" class="form__label">
                        <p>Email</p>
                        <input type="email" id="email" name="email" placeholder="Correo electr贸nico">
                    </label>
                    <label for="phone" class="form__label">
                        <p>Telefono Celular</p>
                        <input type="tel" id="phone" name="phone" placeholder="+591 12345678">
                    </label><br>
                    <button type="submit">Registrarse</button>
                </fieldset>
            </form>
        </main>
        <aside class="content__aside">
            <article class="article">
                <figure class="article__course">
                    <img src="./img/fotografia.jpg" alt="curso de fotograf铆a" >
                    <figcaption>Curso Intermedio de Fotograf铆a</figcaption>
                </figure>
            </article>
            <article class="article">
                <figure class="article__course">
                    <img src="./img/dibujo.jpg" alt="curso de dibujo" >
                    <figcaption>Curso Avanzado de Dibujo</figcaption>
                </figure>
            </article>
            <article class="article">
                <figure class="article__course">
                    <img src="./img/cocina.jpg" alt="curso de cocina" >
                    <figcaption>Curso de Cocina</figcaption>
                </figure>
            </article>
        </aside>
    </div>
    <footer class="footer">
        <p>Buscanos en nuestras redes</p>
        <div class="footer__icons">
            <a href="#">
                <img src="./icons/facebook.png" alt="facebook logo">
            </a>
            <a href="#">
                <img src="./icons/twitter.png" alt="twitter logo">
            </a>
            <a href="#">
                <img src="./icons/instagram.png" alt="instagram logo">
            </a>
        </div>
    </footer>

CODIGO CSS

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

/* -------header------ */

.header {
    background-color: violet;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    width: 20%;
}

.header__title {
    width: 30%;
}

.nav {
    width: 40%;
}

.header__logo--img {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.header__title h1 {
    text-align: center;
}

.nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav a {
    text-decoration: none;
    color: black;
}
.nav li {
    list-style: none;
    padding-right: 1em;
    font-size: 1.25rem;
}

/* ------content------ */

.content {
    display: flex;
    background-color: brown;
    justify-content: space-around;
}


/* content----main----- */

.content__main {
    order: 1;
    width: 70%;
    background-color: powderblue;
    padding: 1em;
}

.content__form {
    width: 40%;
    margin-top: 1.125em;
    margin-left: auto;
    margin-right: auto;
}

.content__form fieldset {
    padding: 1em;
}

.form__label input {
    width: 100%;
    margin-bottom: 1em;
    margin-top: .5em;
    border-radius: 5px;
    height: 25px;
    padding-left: .5em;
}

fieldset button:last-child {
    margin-top: .5em;
    width: 100%;
    height: 30px;
    border-radius: 10px;
}

/* content----aside------ */

.content__aside {
    order: 0;
    width: 30%;
    background-color: beige;
    padding: 1em;
}

.article__course {
    position: relative;
    
}

.article__course img {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    display: block;
    margin-bottom: .5em;
}

.article__course figcaption {
    background-color: rgba(32, 41, 32, .8);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: whitesmoke;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* -------footer-------- */

.footer {
    background-color: snow;
    display: flex;
    justify-content: space-evenly;
    height: 50px;
    align-items: center;
}

.footer__icons a {
    margin-right: 2em;
}

Me imagin茅 hacer la p谩gina de una tienda de caf茅 馃槏

Que emp谩tico el profe, cuando pregunta 驴C贸mo te sientes? Tal cual como dijo, entr茅 en frustraci贸n, pero poco a poco voy comprendiendo y jugando con los estilos y ahora flex-box 馃槂

Dejo mi aporte que me cost贸 UNA BANDA.

Lo aclaro porque no muchos aclaran el esffuerzo que puede llevar para alguien que reci茅n arranca y ve las p谩ginas de otros super avanzadas y puede sentirse frustrado. Es normal que te cueste y segu铆 intentadndo hasta que salga aunque se vea tan simple como el m铆o.

<!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>Desaf铆o</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <nav class="nav">
        <figure class="nav_img-container">
          <img src="./imagenes/Logo.png" alt="" class="img-container_img" />
        </figure>
        <ul class="nav_button-container">
          <li class="button-container_button">Cat谩logo</li>
          <li class="button-container_button">Packs</li>
          <li class="button-container_button">驴Quienes somos?</li>
          <li class="button-container_button">Ayuda</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="sidebar-main">
        <article class="sidebar-main_box"></article>
        <article class="sidebar-main_box"></article>
        <article class="sidebar-main_box"></article>
        <article class="sidebar-main_box"></article>
      </section>
      <section class="content-main">
        <article>
          <p class="p">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
            rerum amet voluptatibus illo adipisci iste fugiat aperiam corporis
            quidem, architecto, deleniti dicta saepe quos eius sed impedit autem
            delectus cumque. Libero aut qui in laboriosam quia cum modi ratione
            molestiae possimus omnis illum officia veritatis tenetur illo
            aperiam similique provident repellendus repellat dolore doloremque
            eveniet corrupti, deserunt harum! Consequuntur, magni? Perspiciatis
            optio ducimus quaerat aliquid? Fuga dolores minima deserunt nobis
            mollitia culpa adipisci quia accusamus dignissimos. Nostrum, culpa
            libero eaque laudantium recusandae iusto eligendi, rem non facilis
            officiis est doloribus. Tempora ratione eveniet libero repudiandae
            non quis odio cum inventore? Ex debitis voluptatum cupiditate quam
            nihil, sapiente maiores quidem nostrum voluptates exercitationem,
            numquam nulla quibusdam adipisci dolor est deleniti iusto! Sed quasi
            unde, tenetur eos excepturi aperiam fugit voluptatibus
            necessitatibus officiis doloribus iste ab explicabo dignissimos quis
            ex magni ipsa dolorem cum! Ducimus nemo dolorum veritatis sed iste
            maiores deserunt?
          </p>
        </article>
      </section>
    </main>
    <footer class="footer">
      <p>Info</p>
      <p>Contacto</p>
      <p>Preguntas frecuentes</p>
    </footer>
  </body>
</html>

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

html {
  font-size: 62.5%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/*  */

.nav {
  background-color: rgb(131, 197, 156);
  width: 100vw;
  height: 9vh;
  display: flex;

  text-align: center;
  align-items: center;
}

.nav_button-container {
  flex-grow: 1;
  margin-right: 1.5rem;
  color: rgb(32, 48, 38);
  font-size: 1vw;
  display: flex;
  justify-content: flex-end;
}

.nav_button-container li {
  width: 15vw;
  list-style: none;
}

.nav_img-container img {
  width: 4vw;
  height: 8vh;
  margin-left: 1.5rem;
}

/*  */

main {
  display: flex;
  font-size: 0.9vw;

}
.sidebar-main {
  background-color: rgb(31, 36, 33);
  width: 15vw;
  height: 86vh;
}

.sidebar-main article {
  background-color: rgb(76, 102, 86);
  width: 6vw;
  height: 12vh;
  margin: 3vh 1vw;
  border-radius: 2rem;
}

/*  */

p {
  color: rgb(31, 36, 33);
  font-size: 0.8vw;
}

footer {
  display: flex;
  flex-direction: flex-end;
  width: 100vw;
  height: 5vh;
  background-color: rgb(50, 131, 81);
  justify-content: space-around;
  align-items: center;
}

Aqu铆 el resultado de mi dise帽o responsive y aqu铆 el c贸digo fuente

<h3>Algunas de propiedades de flex</h3>
  • flex-flow: se puede colocar wrap y column separados con espacios.
  • flex-align: alinea el texto de forma transversal a direction. Tiene varios valores como stretch que hace que ocupe el 100% de la pantalla. O baseline que ocupa solo el tama帽o del texto que se est茅 usando.
  • order: n da un orden de ubicaci贸n colocando un n煤mero. Funciona con positivos y negativos. Los que no tengan un order tienen por defecto el 0.
  • flex-grow: 1 hace crecer a las cajas para ocupar todo el espacio restante en responsive. Se sobre escribe a space-evenly.

El anterior reto lo realic茅 sin Flexbox. Sin embargo, ya lo hab铆a implementado antes. Solo que como varios, no quise hacer trampa. Para dejarles uno de mis proyectos con este display, les dejo este de un reciente reto de Platzi:

Link del reto: https://platzi.com/blog/periodico-simpsons-css/

Volv铆 a hacer el reto implementando Flex
As铆 estaba antes:

As铆 qued贸 con Flex:

Tambi茅n estuve estudiando con Flexbox Froggy y Flexbox Zombies

Reto Cumplido no cabe duda que Flexbox es lo mejor!!

CODIGO

CORRECCI脫N SOBRE align-items:baseline;
El profesor no explic贸 correctamente esta propiedad. Por lo general los contenedores van a adaptarse al tama帽o de su contenido, pero align-items:baseline; no tiene esa funci贸n. Esta es la aclaratoria:

Usando Flex, el tiempo para programar el reto se redujo en aprox 80%. Flexbox es la voz.

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

body {
  width: 100vw;
  height: 100vh;
}


/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  background-color: lightblue;
  height: 5vh;
}

/* Establecer un tama帽o para el nav y que aplicando el justify-content se separe a cierta distancia.*/
nav {
  width: 30vw;
}

nav ul {
  display: flex;
  justify-content: space-around;
}

nav ul li {
  list-style: none;
  /* padding: 0 20px 20px; */

}

/* MAIN */
main {
  display: flex;
  height: 90vh;
}

aside {
  width: 30%;
  background-color: pink;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

aside div {
  width: 80%;
  height: 15%;
  border: 1px solid black;
  border-radius: 10px;
}

section {
  background-color: #273b47;
  color: white;
}

/* FOOTER */
footer {
  background-color: yellow;
  height: 5vh;
}

Ya con esto se puede hacer mucho XD

Comparto mi Layout con Flexbox

Y el despu茅s con el relleno

Se preguntan

驴porqu茅 si aun elemento no le asigno un orden va al principio?

La respuesta es: Su propiedad 鈥渙rder鈥 por default" es CERO

En el siguiente ejemplo a la 煤nica caja que no se le asign贸 orden fue a la N掳 06.

.

SIN FLEXBOX

**

CON FLEXBOX

Primero:

Segundo, inspirado de los dem谩s compa帽eros:

Por si gustan ver el proyecto del segundo:
https://angelnewgate.github.io/amogus-webpage/index.html
https://github.com/angelNewgate/amogus-webpage

De pana que el desafio usando flex es una autentica maravilla. Sin el flex sent铆 una frustraci贸n. Am茅 flexbox!

Costo pero algo salio jejeje a seguir practicando y mejorando el code! 馃槃 me inspire en el cafe 馃槢

Compa帽eros, aqu铆 una muestra de la maquetaci贸n para responsive design.

Respuesta para celular

Respuesta para PC:

C贸digo en 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>cyberfruit</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="encabezado">
        <figure class="icono">
            <img src="./pics/cyberfruit_icon.png" alt="imagen de un pedazo de carne"/>
        </figure>
        <nav>
            <ul class="menuPrincipal">
                <li><a href="">Productos</a></li>
                <li><a href="">Servicios</a></li>
                <li><a href="">Sobre nosotros</a></li>
                <li><a href="">Cont谩cto</a></li>
            </ul>
        </nav>

    </header>
    <main class="principal">    
      <section class="panelL">
        <article class=arti1>Soy la caja 1
        </article>
        <article class=arti1>Soy la caja 2
        </article>
        <article class=arti1>Soy la caja 3
        </article>
        <article class=arti1>Soy la caja 4
        </article>
        <article class=arti1>Soy la caja 5
        </article>
      </section>
      <section class="panelD">
      </section>
    </main>

    <footer class="pie">
      <div class="footerdiv1">Datos aleatoros</div>
      <div class="footerdiv2">Redes sociales</div>
    </footer>
</body>
</html>> 

C贸digo en CSS:

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

html{
    font-size:62.5%;
}

body {
    background-color: rgb(0, 16, 87);
    width:100vw;
    height:100vh;
}

li, ul, nav{
    list-style: none;
    text-decoration: none;
}

.encabezado{
    position:relative;
    background-color: black;
    padding:0.5rem;
    min-width:60rem;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    box-shadow: 0px 5px 5px 5px #27AD0F;
}

.encabezado nav{
    display:flex;
    align-items:center;
}

.menuPrincipal{
    display: flex;
    align-items:baseline;
    justify-content:space-around;
    margin:0.5rem;
    width:60rem;
}

.menuPrincipal a{
    text-decoration: none;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    font-size:2rem;
    font-weight:800;
}

.principal{
    width:100vw;
    height:60vh;
    background-color: rgb(1, 38, 160);
    display:flex;
    justify-content:space-between;
}

.panelL{
    min-height: 120px;
    display:flex;
    flex-direction:column;
    background-color: rgb(0, 83, 94);
    justify-content: space-between;
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0px -8px 5px 5px #27AD0F;
}

.panelL .arti1{
height: 15vh;
color:rgb(211, 253, 235);
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:1.5rem;
font-weight:800;
margin: 0 0.8rem;
display: flex;
justify-content: space-around;
align-items:center;
}


.pie{
    width:100vw;
    height:15vh;
    background-color: rgb(7, 26, 88);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0.4rem;
    box-shadow: 0px -5px 5px 5px #27AD0F;
}

.footerdiv1{
color:rgb(211, 253, 235);
font-family:Arial, Helvetica, sans-serif;
font-size:1.5rem;
font-weight:800;
padding: 0.5rem;
margin: 10px;
border:2px solid black;
box-shadow: 0px 0px 5px 5px #27AD0F;
border-radius:1rem;
}

.footerdiv2{
color:rgb(211, 253, 235);
font-family:Arial, Helvetica, sans-serif;
font-size:1.5rem;
font-weight:800;
padding: 0.5rem;
margin: 10px;
border:2px solid black;
box-shadow: 0px 0px 5px 5px #27AD0F;
border-radius:1rem;
}
> 

Recomiendo este sitio, me ayudo a comprender mejor el tema de flexbox.
flexbox css
css justify-content



Mi desaf铆o mejorado con Flex.

Con Flex se volvi贸 super sencillo y mucho m谩s est茅tico.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hollow Knight Layout</title>
    <link rel="shortcut icon" href="./pictures/hollowknight-icon2.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="nav">
            <input class="header__logo" type="image" src="./pictures/hollowknight-logo.svg" alt="El logo del hollow knight">
            <ul class="nav__list">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Noticias</a>
                </li>
                <li>
                    <a href="#">Caracteristicas</a>
                </li>
                <li>
                    <a href="#">Info</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="main__container">
        <aside class="routes">
            <ul class="routes__list">
                <li>
                    <input type="image" src="./pictures/hollowknight1.jpg">
                </li>
                <li>
                    <input type="image" src="./pictures/hollowknight2.jpg">
                </li>
                <li>
                    <input type="image" src="./pictures/hollowknight3.jpg">
                </li>
                <li>
                    <input type="image" src="./pictures/hollowknight4.jpg">
                </li>
            </ul>
        </aside>
        <section class="content">
            <ul>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-collectorsEdition.webp">
                        <h1 class="content__card-title">Hollow Knight Collector's Edition</h1>
                        <p class="content__card-price">$79.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-shirt1.webp">
                        <h1 class="content__card-title">Scarab's Grotto T-Shirt</h1>
                        <p class="content__card-price">$24.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-shirt2.webp">
                        <h1 class="content__card-title">Nimble Protector T-Shirt</h1>
                        <p class="content__card-price">$24.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-shirt3.webp">
                        <h1 class="content__card-title">Quirrel's Quest T-Shirt</h1>
                        <p class="content__card-price">$24.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-shirt4.webp">
                        <h1 class="content__card-title">Troupe Master T-Shirt</h1>
                        <p class="content__card-price">$24.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
                <li>
                    <div class="content__card">
                        <img src="./pictures/hollowknight-enamelPin7-pack.webp">
                        <h1 class="content__card-title">Hollow Knight Enamel Pin 7-Pack</h1>
                        <p class="content__card-price">$69.99</p>
                        <p><button>Comprar</button></p>
                    </div>
                </li>
            </ul>
        </section>
    </main>
    <footer class="footer">
        <div class="footer__text">
            <p>[email protected] 漏 2019 Team Cherry</p>
            <p>CODED BY: Emmanuel C谩zarez Perea</p>
        </div>      
        <figure>
            <img src="./pictures/teamCherry-logo.svg">
        </figure>
    </footer>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    font-size: 62.5%;
    min-width: 800px;
}
.nav {
    background-color: lightgray;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 6vh;
    box-shadow: 0 2px 10px;
    z-index: 1;
}
.header__logo {
    padding: 0.5vh;
    padding-right: 10vw;
}
.nav__list {
    height: 6vh;
    display: flex;
    align-items: center;
    padding-right: 2vw;
}
.nav__list li {
    list-style: none;
    padding: 0.5vw;
}
.nav__list li a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    color: black;
    font-size: 1.6rem;
    padding: 0.5vw;
}
.nav__list li a:hover {
    background-color: rgb(119, 136, 153, 0.5);
}
.main__container {
    display: flex;
}
.routes {
    background-color: rgb(128, 128, 128, 0.7);
    padding-right: 2vw;
}
.routes__list {
    position: sticky;
    top: 6vh;
}
.routes__list li input {
    width: 16vw;
    height: 18vh;
    min-width: 285px;
    min-height: 135px;
    margin: 2vh 1vw;
    border-radius: 8px;
    box-shadow: 2px 2px 10px;
}
.routes__list input:hover {
    box-shadow: 10px 10px 10px;
}
.routes__list input:active {
    width: 17vw;
    height: 19vh;
    margin-right: 0;
    margin-bottom: 1vh;
    box-shadow: 15px 15px 10px;
}
.content {
    background-color: gray;
    flex-grow: 1;
    min-width: 385px;
}
.content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
}
.content ul li {
    list-style: none;
    margin: 2vh 2vw;
}
.content__card {
    background-color: whitesmoke;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
    width: 385px;
    height: 360px;
    text-align: center;
    font-family: arial;
}
.content__card img {
    width: 385px;
    height: 250px;
    box-shadow: 0 2px 8px;
}
.content__card-title {
    padding: 5px;
    font-size: 1.8rem;
}
.content__card-price {
    padding: 5px;
    font-size: 1.8rem;
}
.content__card button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 2rem;
}
.content__card button:hover {
    opacity: 0.9;
}
.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    background-color: rgb(120, 40, 140);
}
.footer figure {
    display: flex;
    padding: 1vh 1vw;
}
.footer__text {
    display: flex;
}
.footer p {
    margin: 0 1vw;
    font-size: 16px;
    color: whitesmoke;
}

Dejo mi layout hecho con Flex

No tienen ni idea de c贸mo en el anterior reto me part铆 la cabeza para poder centrar todo. Pero estoy muy agradecido por eso, porque gracias a ello aprendes mucho m谩s, el esforzarte y resolver problemas nos hace aprender mucho mejor.

Pr谩ctica con Flexbox

Clase 41 - Flexbox layout


驴Para qu茅 nos sirve la propiedad align-items?

  • Nos permite posicionar los elementos hijos de manera vertical.

驴Qu茅 posibles valores puede tener la propiedad align-items y cu谩l es la funci贸n de estos?

  • Center:
  • Sintaxis:
align-items: center;
  • Funci贸n: Nos permite centrar los elementos hijos de manera vertical sin importar el tama帽o de la pantalla o elemento padre.

  • Flex-end:

  • Sintaxis:

align-items: flex-end;
  • Funci贸n: Nos permite ubicar los elementos hijos al final del elemento padre, pero teniendo en cuenta el eje Y, es decir, se posicionan en la parte inferior del elemento padre.

  • Flex-start

  • Sintaxis:

align-items: flex-start;
  • Funci贸n: Este es el valor por defecto de esta propiedad y nos permite ubicar los elementos hijos al principio del elemento padre, pero teniendo en cuenta en eje Y, es decir, se posicionan en la parte superior del elemento padre.

  • Stretch

  • Sintaxis.

align-items: stretch;
  • Funci贸n: Para usar esta propiedad es muy importante que definamos una altura a los elementos hijo para poder usar este valor. La funci贸n de este valor es permitir que los elementos hijos ocupen todo el alto del elemento padre.

  • Baseline:

  • Sintaxis:

align-items: baseline;
  • Funci贸n: Este valor nos permite hacer que los elementos hijo tengan como alto solo lo que ocupa su contenido.

驴Para qu茅 nos sirve la propiedad order?

  • Esta propiedad nos permite alterar el orden del flujo de los elementos, por ejemplo: podemos hacer que el elemento #3 aparezca de primeras en el flujo.
  • Sintaxis:
order: 1;

驴A qui茅n le ponemos la propiedad order, a los hijos o al elemento padre?

  • A los hijos.

驴Qu茅 valores le damos a la propiedad order?

  • Le damos la posici贸n en n煤meros (1,2,3,4, etc)

驴Qu茅 pasa si le asignamos a algunos hijos la propiedad order y a otros no?

  • Lo que haremos es que los elementos hijo que no tengan con ellos la propiedad order se renderizan en el lado izquierdo y seguidos de ellos si aparecer谩n los elementos que tengan la propiedad order y en el orden que les asignamos con dicha propiedad.

驴Para qu茅 nos sirve la propiedad flex-grow?

  • Nos permite ocupar una cantidad espec铆fica dentro del tama帽o que tenga el contenedor padre.

驴A qui茅n le damos la propiedad flex-grow a los elementos hijos, o al elemento padre?

  • A los elementos hijos.

驴Qu茅 valores le damos a la propiedad flex-grow?

  • Su valor lo indicamos en n煤meros (1,2,3,etc).
  • Sintaxis:
flex-grow: 1;

驴Qu茅 hace que los elementos hijos pierdan la propiedad flex-grow?

  • Que el tama帽o del elemento padre se vuelva m谩s peque帽o y los elementos hijos no puedan ocupar el espacio restante del elemento padre.

驴Para qu茅 nos sirve la propiedad flex-basis?

  • Nos permite especificar el tama帽o inicial de un elemento flexible.
  • Sintaxis:
flex-basis: 10rem;

驴A qui茅n le damos la propiedad flex-basis, a los elementos hijos o al padre?

  • Los elementos hijos.

Propiedades
Flex-direction: Determina cual ser谩 el eje principal. Sus valores son
- Row (default): main axis horizontal
- Column: cross axis vertical
Justify-content: Esta propiedad alinea los elementos respecto al eje principal. Sus valores son:
- flex-start (default)
- flex-end: Los elementos se vayan al final del eje.
- Space-between: Hace que el espacio entre los elementos se distribuya uniformemente para ocupar todo el espacio en el eje principal.
- Space-around: Hace que el espacio alrededor de los elementos se distribuya.
- Center: Manda al centro a los elementos.
Align-items: Esta propiedad alinea los elementos respecto al eje secundario. Sus valores son:
- Stretch: (default) rellana todo el espacio en el eje secundario, en este caso el vertical.
- flex-start
- flex-end: Los elementos se vayan al final del eje.
- Center: Manda al centro del eje a los elementos.
- Baseline: Alinea los elementos sobre la l铆nea base de texto.
Align-self: Esta propiedad sobrescribe los valores de align-item a un elemento 煤nico.

Reordenar Bloques

No quise mejorar el mismo layout que hab铆a dise帽ado anteriormente, decid铆 empezar un proyecto nuevo, evidentemente usando flex xD. Aqu铆 mi resultado:

mi aporte, es una evolucion del que hice sin flexbox

Utilizando Flex 馃槃

cuando usemos el align-items: stretch, hay que checar bien que no estemos usando el width en el contenedor porque si no no se van a estirar las cajas.

La principal diferencia est谩 en que flex-basis solo se le aplica a los hijos de un contenedor que sea de display flex. Mientras que width se le aplica a todos los elementos de nuestro HTML.
.
Y otra que podr铆a ser importante recalcar es que flex-basis puede servir de width y de height dependiendo de como este establecido el flex-direction. Si es row, flex-basis servir谩 de width, si es column, flex-basis servir谩 de height.
.
Gran Aporte de @johncardenasp

Flexbox permite alterar el ancho, alto y posicionamiento de elementos en el espacio disponible.

El orden tambi茅n depende de con que propiedad tengas el flex-direction del padre

  • flex-direction: row-reverse;

  • flex-direction:column-reverse;

Les comparto un recurso que me gusta mucho usar cuando necesito Flexbox.
馃憠馃従https://css-tricks.com/snippets/css/a-guide-to-flexbox/馃憟馃従

Si alg煤n hijo no tiene la propiedad order definida, por defecto es enviado a la izquierda si esta en flex-direction: row, o a la parte de arriba si es flex.direction: column;

Fue demorado superar este reto, tuve que investigar y hacer muchas pruebas, pero lo logr茅 馃憦

Comparto los apuntes de la clase 馃槂

Al ver la parte final鈥

Demasiada buena est谩 clase.

Diego: Muy posible sufriste con el proyecto anterior.
YO: AAAAAAAAAH !!! esta Mi#&!%鈥 porque no cuadra

Les comparto el resultado del desaf铆o con flexbox:

!Claro que es mejor, flexbox es tu mejor aliado!

馃槃 La documentaci贸n de los temas vistos:

Les comparto la modificiaci贸n de mi layout usando Flex

A veces es duro, y me pierdo鈥 pero cuando se termina, y se entiende es demasiado gratificante.
![](obviamente hay mucho por mejorar, pero es gratificante lo que uno ve que ha podido avanzar.

siguiendo con la tradici贸n

  • antes
  • depues

As铆 termina la actualizaci贸n del reto con Display Flex鈥 Excelente curso y bien explicado

![](

Hola 馃槃
He aqu铆 mi resultado con flex aplicado al anterior reto. Aunque me queda a煤n algo dificil hacer un wrap de ambos contenedores en main el que contiene el video y el que tiene las columnas 馃槙

A煤n falta mucho por recorrer, este es solo el comienzo :v

Layout

Header

Main

Footer

Display Flex nos hace la vida m谩s simple a la hora de posicionar los contenedores 馃榾馃挌

Entender FlexBox es como tener superpoderes 馃挌
Reto cumplido 馃憣

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <title>Desafio posicionamiento</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <figure>
                <img src="img/logo.svg" alt="logo">
            </figure>
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                      </li>
                      <li>
                        <a href="#">Cursos</a>
                      </li>
                      <li>
                        <a href="#">Instructores</a>
                      </li>
                      <li>
                        <a href="#">Blog</a>
                      </li>
                </ul>
            </nav>
        </header>
        <main>
            <aside>
                <div class="aside_items"></div>
                <div class="aside_items"></div>
                <div class="aside_items"></div>
                <div class="aside_items"></div>
            </aside>
            <section>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quasi excepturi nisi enim in ratione, repellendus cum provident magnam itaque temporibus modi vero fugiat? Vero vitae fugit debitis facilis quisquam.
                    Incidunt corporis culpa a repellendus at quae qui sit aut, explicabo facilis distinctio, odit quis! Harum rerum, molestias placeat a commodi dolore eligendi deserunt officiis, velit quia facere corporis blanditiis.
                    Cumque accusamus voluptas autem optio aperiam! Voluptatem optio impedit repudiandae quia exercitationem atque debitis minus, nam numquam explicabo, voluptas nihil vitae magni in deleniti delectus. Eligendi quaerat deserunt culpa temporibus.
                    Magni reprehenderit cupiditate velit necessitatibus dolores voluptate? Doloribus nostrum totam quo ratione culpa, saepe error, vero officia laboriosam nobis facere fugit modi atque incidunt quasi sint! Cupiditate, fugit? Voluptas, molestias.
                    Temporibus ad deserunt ex dolor optio adipisci, doloribus minima laudantium, voluptate voluptatem fuga nostrum iusto culpa perferendis nulla autem expedita maiores iure suscipit labore corrupti voluptatibus quos debitis! Dignissimos, est!
                    Sapiente ex porro alias ea enim velit, repellendus minus quaerat quos animi, adipisci facilis quod quia, a ducimus! Quidem nostrum est voluptatem cum minus repellendus in? Incidunt doloremque beatae sunt.
                    Ducimus ea nostrum iure aperiam. Officia quisquam distinctio quaerat laborum dolorem cumque? Maxime eos, corporis perferendis sunt iure eius ipsum facere ducimus, deserunt delectus et illum illo debitis eligendi placeat!
                    Laborum et consectetur rerum aut quibusdam debitis, dolor doloremque magni delectus numquam optio molestias exercitationem at. Voluptate aspernatur, mollitia cum at repellat expedita? Ratione eligendi non fugit exercitationem illo ex.
                    Earum pariatur voluptate quod qui voluptates consequuntur inventore blanditiis aliquid nam assumenda odit accusantium aut voluptas minus expedita neque odio distinctio, doloribus saepe nesciunt fugit. Veritatis fuga error inventore ex?
                    Nisi repellat ratione eligendi commodi quibusdam aperiam accusantium ullam ea placeat exercitationem, assumenda odio ducimus mollitia adipisci voluptate dignissimos obcaecati quod perferendis, possimus eius minima aliquam dolor. Libero, optio aliquam!
                </p>
            </section>
        </main>
        <footer>
            <a href="#">About us</a>
        </footer>
    </body>
</html>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    font-family:Tahoma, Geneva, Verdana, sans-serif;
    font-size:1.2rem;
}
body{
    width:100vw;
    height:100vh;
}
header{
    width:100%;
    height:10%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background: red;
}/* Como centrar una imagene en el padre */
figure{
    width:50%;
    height:100%;
    overflow:hidden;
}
figure img{
    max-height:96%;
    padding:2% 2.5%;
}/* Como centrar una imagene en el padre */
nav{
    margin:0 2.5%;
    width:50%;
}
ul{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-evenly;
}
li{
    list-style:none;
}
li > a{
    text-decoration:none;
}
main{
    width:100%;
    height:80%;
    display:flex;
    background: green;
}
aside{
    width:25%;
    height:100%;
    display:flex;
    flex-flow:column wrap;
    justify-content:space-evenly;
    align-content:center;
    background: yellow;;
}
.aside_items{
    width:95%;
    height:23.8%;
    background: pink;
}
section{
    width:75%;
    max-height:100%;
    text-align:justify;
    background: gray;
}
section p{
    padding:2.5%;
    height:95%;
    overflow:hidden; /* evita se desborde el texto*/
}
footer{
    width:100%;
    height:10%;
    display:flex;
    justify-content:center;
    align-items:center;
    background: blue;   
}
footer a{
    color:white;
    text-decoration:none;
}
footer a:hover{
    color:black;
    text-decoration:underline;
}

Esta imagen puede ayudar con flex:

Contenedor Padre ( Flex Container )
Elementos Hijos ( Flex Items )
Eje Principal ( Main Axis )
Eje Transversal ( Cross Axis )

Mi aporte del reto:

este es el codigo que utilice:

<!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>Reto</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <nav class="container1">
        <ul class="navbar">
            <li class="img"><img src="./platzi-logo.png" alt="Logo"></li>
            <li class="etiqueta">Cursos</li>
            <li class="etiqueta">Profesores</li>
            <li class="etiqueta">Contacto</li>
            <li class="etiqueta">Blog</li>
        </ul>
    </nav>

    <div class="flex-container">

        <main>
            <section class="container2">
    
                <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>
            </section>
        </main>
    
        <aside class="adds">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus architecto cupiditate placeat id ratione accusamus magni, doloribus et voluptatem inventore iste quis! Sed commodi nam corporis fuga numquam doloribus ducimus?
            Repudiandae, iste dolore. Rem tenetur omnis nulla fuga facere vel natus totam recusandae debitis laborum. Corporis repellendus ullam, magni expedita porro ipsam, nostrum omnis modi dolorem illo molestiae recusandae nobis.
            Tenetur consequatur mollitia, ad nemo quas officiis maiores sapiente deserunt, ipsum incidunt vel expedita architecto magnam omnis obcaecati. Tempora rerum fugit sunt, minima asperiores accusantium obcaecati atque tenetur ea. Necessitatibus!
            Quia minima officiis ex suscipit nulla at beatae in consectetur iusto ullam, impedit obcaecati repellendus accusamus ea! Facere odit omnis id blanditiis facilis, perspiciatis quisquam. Molestias et quis a distinctio.
            Fugit facere exercitationem consequuntur totam, consectetur eveniet aut ipsa iusto inventore vel, porro ipsam recusandae voluptatibus velit unde, accusamus maxime asperiores temporibus animi? Molestiae explicabo nisi harum, esse eos placeat!
            Dolorum tenetur nostrum error. Aspernatur, assumenda! Voluptates nisi eius ab voluptatum! Sint dicta totam quo tenetur alias, consectetur odit magni corrupti iure consequatur impedit vitae! Explicabo quibusdam totam nulla vero.
            Mollitia, illo nesciunt commodi cumque laboriosam necessitatibus amet vero aut quas unde. Cum numquam repudiandae accusantium ratione provident quas accusamus, ipsam, neque iure architecto ipsum molestias, culpa nostrum perferendis amet.
            Laboriosam distinctio qui adipisci eius voluptate rerum enim expedita facilis beatae, nobis quisquam? Libero ullam ipsa dolores ipsam dignissimos perspiciatis sed quam consectetur a odit dolorem enim saepe, delectus cupiditate.
            Perspiciatis harum cum sed velit cupiditate voluptatem consequuntur quod earum ea dolorem sapiente corrupti eum reiciendis dolores expedita officia alias sit, reprehenderit dolorum maxime porro? Iure, consectetur! Fugiat, distinctio beatae.
            Maxime tempora sit eum accusantium nulla, quidem minus assumenda ducimus sint quisquam perspiciatis esse ex maiores id repellendus eveniet nam distinctio expedita ratione et vel sequi reiciendis? Illum, ipsa eius.
            Rerum ipsam quo, voluptas deserunt cum, unde eaque sapiente obcaecati aspernatur non repellendus hic vero! Error incidunt et repudiandae veritatis vero amet, aliquam cum dolore explicabo exercitationem eligendi nam. In?
            Voluptatum saepe exercitationem iure nam quam officia voluptatem omnis, amet dolorem alias necessitatibus iste placeat inventore cumque fugit, blanditiis deserunt ipsa aliquam? Error eum veritatis quibusdam odio? Natus, error id?
            Modi vitae sit rerum asperiores autem in labore ipsam molestias distinctio! Similique consectetur cumque quo optio commodi illo rem, quis molestias ipsum dolorem, nam voluptates rerum fugiat deleniti hic maxime?
            Ducimus sit aut consectetur quae, quaerat, autem repellat consequuntur, atque necessitatibus explicabo itaque! Mollitia, magni quas! Sunt aperiam rem repellat voluptatum, eum ducimus quo cumque. Nobis fuga nulla ipsam provident.
            Dolorum repellat reiciendis fugit quibusdam facere quasi nam velit consectetur ratione! Aliquid illum exercitationem corrupti odit, placeat obcaecati nisi cupiditate nihil et! Facilis, suscipit. Optio labore ex fuga sapiente suscipit!
            Quisquam praesentium dolor non blanditiis voluptas, necessitatibus voluptate aperiam? Quidem libero nam tempora a nostrum praesentium minima natus obcaecati dolore quas suscipit est accusamus culpa officiis, repellat earum, unde perferendis.
            Ipsam maiores placeat incidunt sequi molestias deserunt, quaerat doloremque itaque voluptatibus veritatis corporis ea. Assumenda animi officia amet! Maxime quibusdam quos rerum repudiandae sapiente ratione earum beatae saepe distinctio veritatis?
            Asperiores, obcaecati omnis fugit mollitia voluptate repellendus ea ipsa sequi corrupti explicabo, hic culpa dolores tenetur magnam? Suscipit, praesentium rem ratione, pariatur aliquam nisi cumque fugit laborum labore totam mollitia.
            Expedita cupiditate recusandae illo eveniet! Asperiores quaerat praesentium mollitia quam neque dicta doloremque, laboriosam culpa quidem voluptas nostrum dolores cumque maxime optio porro labore aliquam consequuntur et assumenda, harum vero.</p>
        </aside>

    </div>
    <footer>
        <p>Contact us</p>
    </footer>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

.container1 { 
    display: flex;
    background-color: bisque;
    height: 5rem;
    align-items: center;
    justify-content: flex-end;

}

.navbar {
    display: flex;
    list-style: none;
}

.img {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
}

img {
    height: 4rem;
}

.etiqueta {
    padding: 0 1rem;
    background-color: aquamarine;
    border-radius: 4px;
    margin-right: 1rem;
}

.flex-container {
    display: flex;
}

.container2 {
    width: 17rem;
    padding: 1rem 0 0 0;
    display: flex;
    flex-direction: column;
    background-color: crimson;
    align-items: center;
}

.box { 
    width: 15rem;
    height: 10rem;
    margin-bottom: 1rem;
    background-color: orange;
    border-radius: 8px;
}

.box p {
    height: 10rem;
    text-align: center;
    margin: 4rem 0; /* Para centrar verticalmente el texto  */
}

.adds {
    width: auto;
    height: auto;
    background-color: gray;
    padding: 2rem;
}

footer {
    background-color: cornflowerblue;
    height: 4.3rem;
}

footer p {
    text-align: center;
}

La verdad la aplicaci贸n de flexbox es muy 煤til.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="description" content="This is a HTML5 webpage with FlexBox"/>
        <meta name="keywords" content="HTML5, CSS3, FlexBox">

        <title>CSS3 Layout</title>

        <link rel="stylesheet" href="./styles.css">

    </head>
    <body>
        
        <div class="header-container">
            <header class="header-box">
                <h1>Logo</h1>
            </header>
            <nav class="header-container--nav header-box">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a href="#">Teachers</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
        </div>

        <div class="main-container">
            <aside class="main-aside">
                <div class="aside-box">1</div>
                <div class="aside-box">2</div>
                <div class="aside-box">3</div>
                <div class="aside-box">4</div>
            </aside>
            <main class="main-box">
                <section>
                    <h2>Welcome to your webpage</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium itaque aliquam ipsum enim vel nulla, nobis, eaque natus nihil autem non, tenetur suscipit praesentium veritatis officia. Esse nobis reiciendis veniam est. Ipsam fugit incidunt dolores ut, excepturi eius in consequuntur qui et facilis libero, maiores, commodi eum reiciendis adipisci harum quo distinctio? Expedita alias illo quos culpa praesentium eos, consequuntur eum et quaerat officia dolorum esse voluptas dolores consectetur, impedit ipsum odit consequatur saepe tenetur architecto porro a repudiandae nisi ipsa! Necessitatibus facere architecto cum sint eum ipsa perferendis inventore. Soluta deserunt modi recusandae facere quibusdam, tenetur fugiat molestiae, consectetur vitae consequuntur alias asperiores nobis exercitationem aliquid fugit dignissimos molestias quasi nihil. Nobis quia quibusdam nam dolorem odit blanditiis iusto dolorum eveniet harum laudantium pariatur sapiente et, itaque, velit cum ipsa ea qui magni soluta rerum, quis quae? Facilis ut amet voluptas, ab explicabo dignissimos architecto fuga labore ipsam et voluptatem esse eum adipisci dolore dolor corporis ex vel dicta porro maiores nam modi magnam! Accusamus, earum ea? Officiis asperiores adipisci hic dolorum, nihil enim molestiae non suscipit recusandae pariatur quasi quis fuga maiores eum deleniti, minima amet facere nam iste nesciunt culpa esse eaque consectetur optio! Tempore sint quia pariatur voluptates quos rerum nam illo id! Dignissimos in veritatis repellendus quasi, saepe, dolorum fugiat omnis at aliquam itaque exercitationem accusamus tempora harum. Et quasi labore, quas numquam exercitationem consequuntur consequatur, aperiam vel repellendus neque beatae aliquid voluptate assumenda minima rem! Veritatis magnam recusandae quae, itaque ratione atque dicta? Necessitatibus omnis aut sunt corrupti labore dolor debitis qui, enim porro, voluptas alias cum, odit natus dolores ducimus at tempore! Vero minus dolorem placeat sed necessitatibus nesciunt natus tenetur perferendis officia dicta nobis consequatur, deserunt facere dolore culpa, impedit aliquam? Exercitationem, eaque odio nisi facilis similique consequuntur veritatis quia est eius sequi sed possimus nemo iure temporibus ullam placeat libero hic inventore magni quidem? Repudiandae aspernatur rem reiciendis et veniam odio laudantium? Obcaecati architecto aliquam, quis aspernatur cumque enim ipsum fugiat consequatur odit minima molestiae sit provident animi quae ad optio facere inventore incidunt blanditiis ullam, porro eaque tempore praesentium? Facere ex pariatur eligendi, ut, rerum amet nulla magnam culpa natus consequatur, eius ratione quibusdam neque iste suscipit. Quae est ex distinctio neque eius reiciendis labore excepturi dolor illum ipsam ea atque iusto, inventore culpa eos nisi sunt cum enim quo voluptas, earum commodi, voluptates tenetur! Rem ipsa aut voluptatem tenetur, placeat pariatur quia facilis qui. Debitis ratione omnis accusantium nesciunt, totam suscipit praesentium autem numquam. Necessitatibus, atque sed exercitationem voluptatibus molestiae quasi eligendi facilis saepe doloremque vel fugiat, rerum voluptas? Voluptatum, accusamus illo. Odit, omnis dolores, veniam cupiditate voluptatibus asperiores quas sunt error perferendis maxime quia praesentium a natus molestias. Enim totam pariatur sapiente velit quam autem deserunt ea molestias, sit tempora? Culpa, distinctio optio recusandae ipsam harum, libero corrupti animi molestias, voluptatem ipsa repellat sunt eos sequi vitae consectetur nisi unde sed deleniti eum magnam obcaecati voluptates qui officia alias? Commodi aspernatur nemo sint. Modi itaque a dolorum beatae corrupti magni est accusantium reprehenderit aliquid at voluptate nobis repellat quam commodi maiores autem incidunt animi ipsa quis officiis enim, ad deleniti suscipit. Ipsa deserunt illum tempora itaque eaque harum. Necessitatibus fugiat eum quia libero porro. Laudantium consequatur molestias quisquam accusamus nemo reiciendis autem sapiente eos non? Quia fugit consequatur maxime pariatur quos laudantium esse? Aliquid ratione magnam dignissimos non odit itaque a voluptatum. Minus reiciendis, recusandae assumenda corrupti in nostrum doloribus asperiores nobis neque impedit incidunt ex culpa perspiciatis eligendi earum molestias quia voluptatibus libero pariatur similique accusantium maiores, iste amet. Nesciunt explicabo non doloremque velit fugit cumque architecto ducimus odit. Dolorum illo adipisci velit, mollitia a cum eligendi, corporis autem aspernatur reprehenderit deserunt tempora nisi. Blanditiis, dicta quidem tenetur obcaecati accusamus non dolorem architecto perferendis molestiae similique quo pariatur. Dolorum odio animi, obcaecati non ipsam ad beatae ducimus deserunt ut reiciendis ea eum placeat necessitatibus suscipit dolorem earum perspiciatis quae expedita cupiditate vel delectus libero doloremque voluptate odit! Id nobis esse consequuntur deleniti perferendis fuga quaerat exercitationem accusantium! Nulla non tempore libero, delectus maiores, ad voluptatibus rem corrupti itaque facilis reiciendis deserunt cumque magni sit! Impedit doloremque nam aspernatur dolor repellendus. Rerum impedit vitae accusantium quibusdam. Iste accusantium, ducimus omnis, reprehenderit est voluptas repudiandae consequuntur corrupti iure amet quidem voluptatum qui commodi laudantium assumenda officiis natus. Itaque, aliquam dolores! Ipsam, optio? Minima sapiente nobis tempore perspiciatis dicta modi laborum maxime sed deleniti repellat quam, vero, libero nam incidunt itaque quod illo suscipit consequatur aliquid doloremque? Labore molestiae voluptates sapiente ullam, consequatur error dolorum, harum, dolore incidunt voluptatum eius blanditiis? Repudiandae asperiores mollitia quo accusantium. Accusantium, placeat? Optio, ullam facere! Doloribus libero vero nulla quidem fugit itaque labore temporibus consectetur pariatur delectus nostrum doloremque, recusandae aperiam earum qui voluptates expedita consequuntur unde impedit aliquid explicabo debitis! Sint similique quis earum sapiente quasi eligendi sunt sit, aspernatur magni ad nemo dolore asperiores suscipit iure magnam incidunt quibusdam nam quae iusto, perferendis quidem dicta nobis. Cumque hic quo eaque libero, quasi repellat debitis, distinctio officia tempora reiciendis beatae nobis illum est, velit deleniti labore. Pariatur mollitia velit nobis atque excepturi fugiat doloribus, numquam est aperiam maiores quibusdam magnam unde ipsam dolor reprehenderit vel? Rem, deserunt. Itaque explicabo voluptates perspiciatis? Asperiores culpa ducimus id. Natus cumque asperiores beatae alias architecto corrupti eius deserunt odio voluptatum? Placeat porro dolor perspiciatis saepe earum minus sapiente similique animi totam vero enim nihil, labore qui optio modi tempore dicta nostrum ut aut ex? Ea ab numquam aliquam quo, facere accusantium impedit assumenda vitae. Illo quisquam, consequuntur, cum sint voluptatibus aperiam suscipit laboriosam fuga officiis optio reiciendis corporis et. Fugiat unde velit quo, cumque veniam ab expedita aspernatur porro laudantium, molestiae itaque molestias perferendis esse quidem earum laboriosam perspiciatis debitis nisi, nulla magnam distinctio tempora odit numquam inventore. Mollitia quisquam, quibusdam saepe hic nemo, asperiores commodi nobis similique assumenda aliquam neque natus voluptatibus iusto veritatis reprehenderit quasi. Voluptatibus ipsa minima perspiciatis saepe alias est adipisci dolores, aut dolore! Atque pariatur dolorum tempora necessitatibus ab voluptate blanditiis laboriosam nihil, voluptas unde minus enim fugit, autem assumenda rem incidunt? Fuga vel nobis accusamus aspernatur sit temporibus nisi aliquam tempora necessitatibus? Error officia dicta provident hic eaque sint mollitia harum dolorum suscipit consequatur voluptas quisquam ut vero veritatis dolor repellat, alias atque nostrum officiis. Quos molestias ullam libero ea modi. Tenetur recusandae esse ipsa cum repellat soluta vitae blanditiis veritatis illum, sint eos sed minus facere sit. Cum minima quibusdam deleniti minus soluta tempore saepe explicabo. Impedit aut nesciunt dignissimos fugiat obcaecati. Perspiciatis velit quis cupiditate, odio quia rerum laborum repellat amet aperiam nostrum, quibusdam at quaerat. Perferendis mollitia, quam possimus exercitationem modi excepturi quae eius libero eligendi ratione ea voluptas. Suscipit ratione voluptatum quisquam aut autem distinctio eos dicta animi laboriosam, facere voluptate sapiente commodi adipisci in amet hic vitae vero maxime quidem voluptas nulla. Tempore, dolores? Modi illum odio in tenetur. Ex eos obcaecati assumenda alias dicta saepe ad, in ut. Velit voluptatibus totam fugit eveniet, asperiores exercitationem quam. Modi, ratione. Ad aliquid quo delectus officiis eos repellat tempora numquam adipisci ut. Molestiae modi obcaecati earum soluta suscipit aspernatur assumenda illum praesentium sed officia et amet saepe optio dolore, consequatur qui! Saepe a, illum possimus provident esse asperiores autem, accusamus nihil cupiditate quasi dolorem hic amet ex itaque cum voluptates doloremque, tenetur distinctio! Dolorum, odio? Minima ut quia animi? Explicabo dolores architecto aut maxime sapiente ab dolore officiis hic obcaecati sunt pariatur nisi, iure nulla exercitationem, impedit blanditiis beatae similique tenetur accusantium fuga. Itaque quam repellat asperiores mollitia eligendi earum. Accusamus veritatis minus mollitia praesentium in hic natus, doloremque rerum dolor iure voluptas doloribus quasi quae molestias. Minima corporis itaque soluta ad veniam aliquam illum quidem, earum totam fugit enim tenetur laborum autem nam, expedita dolor? Non tenetur repudiandae eos, veritatis debitis eum dolores ea totam, velit repellat, iusto sapiente perspiciatis earum maxime consequatur fugiat repellendus tempora ullam vero quia! Dolor quam est doloribus corrupti quidem quod tenetur dignissimos libero enim veniam eaque ea quibusdam adipisci earum velit aperiam, iste optio dolores vero neque tempore accusamus, ut necessitatibus! Est voluptatum tempore facere sed accusantium omnis nihil excepturi aut, eum qui quisquam suscipit facilis rerum, harum sapiente saepe aspernatur architecto voluptatem laudantium eius odio obcaecati laborum exercitationem? Adipisci voluptate, est, blanditiis placeat, iure optio officia totam neque pariatur porro laudantium odio! Totam hic incidunt rem consequatur explicabo eum velit beatae consequuntur. Exercitationem numquam ab quisquam distinctio quibusdam odit, deleniti ratione, fugit ipsa quae eligendi inventore natus laboriosam accusamus. Earum cupiditate tempora aperiam nemo sapiente dolor at, hic doloremque officiis accusamus facere nihil sunt dicta doloribus quasi consectetur aspernatur architecto, nostrum, incidunt minus! Doloremque ut natus quaerat quidem quo maxime cum placeat nobis saepe quia architecto aspernatur, odio similique, accusamus, ullam explicabo consequuntur minima vitae commodi magni cupiditate? Asperiores praesentium ex a vero, neque debitis autem nesciunt iste quia! Dolores voluptas necessitatibus cupiditate reiciendis autem, odit provident impedit nobis asperiores fuga ducimus totam beatae? Reprehenderit sit aperiam quidem! Nemo sint natus, ullam fugit minima provident illum nesciunt. Voluptatem quia in nulla eos magnam sequi delectus quas exercitationem. Vitae vero eos repellendus ut eaque distinctio iusto rem debitis repudiandae incidunt, a, qui ullam et pariatur. Assumenda molestias temporibus illo repudiandae culpa, dolor perspiciatis placeat ea magni voluptates? Quis eveniet odit eos, eaque, illum laborum sed quod cum laudantium blanditiis, exercitationem enim ipsa omnis hic et? Corrupti ab iste laboriosam non facere iure, sint ad magnam similique in fugiat aliquid cupiditate reiciendis tempora, quis quam sapiente illo. Illum incidunt delectus exercitationem pariatur dolorum impedit sapiente ad ut aliquid, saepe nobis porro eum iure eaque commodi totam cum consequatur hic. Repudiandae distinctio quaerat itaque qui rerum temporibus nostrum quam. Cum minus distinctio a, sapiente consequuntur exercitationem perspiciatis. Ex, soluta asperiores. Iusto esse facilis accusamus perferendis tenetur, excepturi facere nostrum possimus dignissimos aspernatur? Recusandae, delectus. Neque cum fugit, perferendis iure dolorem iusto asperiores possimus commodi, velit, architecto ducimus magnam ad delectus. Sit laboriosam voluptatibus natus ipsum dolorum ea accusantium dolores consequuntur! Nemo omnis dolorum eveniet veritatis consequuntur soluta cupiditate distinctio laboriosam! A perspiciatis ad voluptate alias laborum quia! Impedit quibusdam dolor blanditiis nobis, incidunt, aspernatur quae, nam reiciendis ipsum amet dicta animi sed fugiat rem sit earum voluptatibus distinctio neque nemo quo corrupti laborum non exercitationem. Quidem, ipsa. Consequuntur dolorem nemo eius, iure iusto quia saepe beatae ab iste incidunt ipsa, possimus provident et a odit, quasi quam architecto perferendis eos! Minima iusto consequatur dicta id cum quis quasi vitae tempora laudantium? Dignissimos sapiente facilis nam neque amet facere numquam saepe dolore iure, quo, aliquam laborum consectetur suscipit architecto consequatur nobis temporibus accusamus, blanditiis cumque sint! Dolorem optio soluta obcaecati porro cum voluptas quia, facilis temporibus incidunt! Autem consequuntur aut dolore in deserunt! Ex, quod quia voluptatibus voluptas optio odit repellendus est laboriosam? Minima deserunt maxime molestias consequatur, saepe id nulla inventore sequi delectus odit nobis nam ut cum voluptates error impedit itaque ab, optio vitae deleniti, quidem dignissimos? Sapiente repudiandae excepturi labore corrupti, voluptatibus in molestiae incidunt voluptas veritatis nihil, suscipit officiis assumenda aperiam sed. Quae culpa rem repellat corporis dolorum ipsum aliquid maiores ab. Quia laborum corrupti iste cupiditate illum molestiae saepe neque ad quas, officiis illo facere eius fuga aliquid eligendi dolores, accusamus quae dignissimos dolorem distinctio quis explicabo. Saepe id inventore rem maiores quas sequi nihil blanditiis atque nisi, numquam exercitationem nostrum commodi ullam dolorum architecto magni mollitia, quaerat aperiam sit corrupti iusto esse tenetur expedita. Quia magni ut perspiciatis aliquam id, voluptates eius voluptatem tempore natus cum corporis asperiores minima sit autem consequatur sunt praesentium sequi rem voluptatum consectetur, quas fuga, blanditiis voluptas. Aspernatur expedita deserunt reprehenderit unde aliquid, nesciunt vero modi voluptatum beatae eius sit alias et deleniti quae inventore placeat. Ab maiores voluptatem, nisi at repellat itaque similique, exercitationem nam vel iste ducimus. Possimus ad molestias officia nemo quae ipsum, culpa cum! Rerum assumenda ad, earum nihil provident soluta repellendus, nemo numquam porro dolorem fugiat reprehenderit explicabo esse laudantium voluptas fugit sequi. Doloremque corporis laboriosam magnam cupiditate veritatis perferendis reiciendis, molestiae, architecto voluptas, ipsa eaque velit numquam!</p>
                </section>
            </main>
        </div>



    </body>
</html>

El CSS3 es el siguiente:

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

    font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
    color: black;
}

.header-container {
    background-color: cadetblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    flex-wrap: wrap;
}

.header-container header {
    padding-left: 30px;
}

.header-container--nav li {
    list-style: none;
    display: inline-block;
    margin: 0 15px;
}

.main-container {
    display: flex;
}

.main-aside {
    background-color: orange;
}

.aside-box {
    background-color: brown;
    margin: 40px;
    padding: 40px;
    border: 1px solid black;
    border-radius: 10px;
}

.main-box {
    background-color: white;
    text-align: justify;
    flex-grow: 1;
    margin: 20px;
}

.main-box h2 {
    margin: 10px 10px 10px 0;
    text-transform: uppercase;
}


Utilizando Flexbox demore 35 min en hacer el desaf铆o, anteriormente sin esta herramienta demore poco mas de 3 horas.
Realmente es una herramienta muy 煤til y es recomendable estudiarla a profundidad.

Llevo su tiempo, pero sirvio la practica

Es poco pero es trabajo honesto

asi me quedo con lo que e aprendido de flex:
la anterior no lo pude hacer, ahora lo hice un poco menos frustrado pero se logro

desafio completado

sin flex

con flex

Me cost贸 mucho menos esfuerzo, aunque descubr铆 algo durante este desaf铆o, si utilizas flex direction column para el sidebar, las reglas del contenedor se invierten por lo que ahora justify-content ser谩 el que alinee en el eje vertical y align items en el eje horizontal.

He desarrollado el siguiente ejercicio PASO a PASO de: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Espero les ayude:

Se complementa el aprendizaje leyendo unos comentarios que de verdad son buenos, para que se entienda mejor el tema e incluso se profundice.

Mucho mejor!!

HTML

<!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">
    <link rel="stylesheet" href="/css/desafio-flexbox.css">
    <title>Document</title>
</head>
<body>
    <header>
        <figure class="logo"><img src="https://cdn-icons-png.flaticon.com/512/5344/5344530.png"></figure>
        <nav>
            <ul>
                <li>Casa</li>
                <li>Cursos</li>
                <li>trabajo</li>
                <li>Adios</li>
            </ul>
        </nav>
    </header>
    <main>
        <aside class="contenedor">
            <section class="contenedor-izquierdo">
                <article><figure><img src="https://images.pexels.com/photos/7205925/pexels-photo-7205925.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></figure></article>
                <article><figure><img src="https://images.pexels.com/photos/7205925/pexels-photo-7205925.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></figure></article>
                <article><figure><img src="https://images.pexels.com/photos/7205925/pexels-photo-7205925.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></figure></article>
                <article><figure><img src="https://images.pexels.com/photos/7205925/pexels-photo-7205925.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"></figure></article>
            </section>
            <section class="contenedor-derecho">
                <h1>Videos de vladi</h1>
                <span>Los mejores videos</span>
                <video class="videos" src="/videos/mw2.mp4" controls></video>
                
            </section>
        </aside>
        <footer>
            <section><span>Estado Chiapas</span></section>
            <section>
                <ul>
                    <li><img src="https://cdn-icons-png.flaticon.com/512/1384/1384014.png"></li>
                    <li><img src="https://cdn-icons-png.flaticon.com/512/3669/3669691.png"></li>
                    <li><img src="https://cdn-icons-png.flaticon.com/512/2175/2175193.png"></li>
                </ul>
            </section>
        </footer>

    </main>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    width: 100vw;
}
header{
    background-color: aqua;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.logo img{
    width: 5vh;
}
.logo, nav, nav ul li{
display: inline-block;
}
nav ul li{
    margin-left: 2rem;
}
.contenedor{
    display: flex;
    flex-wrap: wrap;
}
.contenedor-izquierdo{
 background-color: blueviolet;
 width: 30vw;
 height: 90vh;
 display: flex;
 justify-content: space-around;
 flex-direction: column;
 flex-wrap: wrap;
}
.contenedor-derecho{
    width: 70vw;
    background-color: beige;
    display: grid;
    place-items: center;
}
.videos{
width: 10rem;
}
article{
    margin-left: 6vw;
}
article figure img{
    width: 10 rem;
    height: 5rem;
    border-radius: 10%;
}
footer{
    background-color: brown;
    display: flex;
    justify-content: space-between;
}
section ul li img{
    width: 5vh;
}
section ul li{
    display: inline-block;
}

Tarea completada

ANTES


DESPUES Ya es responsivo

<!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>Document</title>
    <link rel="stylesheet" href="reto.css">
</head>

<body>
    <nav class="nav">
        <div class="logo">logo</div>

        <ul class="nabvar">
            <li><a href="#"> Home</a></li>
            <li><a href="#"> curso</a></li>
            <li><a href="#"> introduccion</a></li>
            <li><a href="#"> Blog</a></li>
        </ul>

    </nav>
    <main>
        <aside class="aside">
            <div class="article"></div>
            <div class="article"></div>
            <div class="article"></div>
            <div class="article"></div>
        </aside>
        <section class="section">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem culpa aspernatur blanditiis id quas, voluptas accusantium? Sint, voluptate dignissimos repellat eaque tenetur architecto eos accusamus id quae molestias quisquam. Natus.
                Ad adipisci assumenda vel voluptates! Quas totam, dolorum nisi alias corrupti, quasi architecto vel deleniti ducimus optio et minus cumque eius, officia eum praesentium aliquid. Corrupti dolorem delectus enim ad! Numquam quod placeat sunt
                corporis cumque laboriosam ea possimus ipsa rem doloribus quo eligendi, nulla quidem tenetur dolores blanditiis excepturi voluptatibus fuga, officiis aliquid distinctio, soluta tempora provident veniam! Numquam.</p>
        </section>

    </main>
    <footer>
        <p>derechos reservados</p>
    </footer>
</body>

</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
}

.logo {
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 4rem;
}

.nabvar {
    display: flex;
}

.nabvar li {
    padding: 2rem;
    list-style: none;
    text-align: center;
}

.nabvar li a {
    text-decoration: none;
}

main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.aside {
    background: peru;
    padding: 1rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.article {
    background: greenyellow;
    padding: 1rem;
    margin: 1rem;
    border-radius: .8rem;
    width: 30vw;
    justify-content: space-evenly;
    flex-grow: 1;
}

.section {
    background: darkmagenta;
    padding: 1rem;
    height: 100vh;
    text-align: justify;
    flex-basis: 22rem;
    flex-grow: 1;
}

footer {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 5px;
    background-color: navajowhite;
}

Mi desaf铆o con uso de flex:

<!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>Desaf铆o Layout 1 Flex</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header class="cabecera">
      <div>Logo</div>
      <nav>
        <ul>
          <li>Home</li>
          <li>Cursos</li>
          <li>Instructores</li>
          <li>Blog</li>
        </ul>
      </nav>
    </header>
    <main class="principal">
      <aside>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </aside>
      <section>
        <article>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque ad
          officia quia quibusdam saepe voluptas dolor, inventore corrupti optio
          perferendis, unde maiores nemo, officiis aliquid dolorem! Repellat
          delectus a praesentium? Lorem ipsum dolor sit, amet consectetur
          adipisicing elit. Itaque ad officia quia quibusdam saepe voluptas
          dolor, inventore corrupti optio perferendis, unde maiores nemo,
          officiis aliquid dolorem! Repellat delectus a praesentium? Lorem ipsum
          dolor sit, amet consectetur adipisicing elit. Itaque ad officia quia
          quibusdam saepe voluptas dolor, inventore corrupti optio perferendis,
          unde maiores nemo, officiis aliquid dolorem! Repellat delectus a
          praesentium? Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Itaque ad officia quia quibusdam saepe voluptas dolor, inventore
          corrupti optio perferendis, unde maiores nemo, officiis aliquid
          dolorem! Repellat delectus a praesentium?
        </article>
      </section>
    </main>
    <footer class="pie">Cont&aacute;ctanos</footer>
  </body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
.cabecera {
    display: flex;
    background-color: #457B9D;
    justify-content: space-between;
    align-items: center;
}
.cabecera div {
    color: white;
    font-size: 5rem;
    padding: 0 2rem 1rem;
}
.cabecera ul li {
    list-style: none;
    color: white;
    display: inline-block;
    padding: 0 2rem;
}
.principal {
    display: flex;
}
.principal aside {
    flex-basis: calc(20%);
    background-color: #A8DADC;
}
.principal aside div {
    border-radius: 1rem;
    margin: 2rem;
    width: auto;
    height: 15rem;
    background-color: #F1FAEE;
}
.principal section {
    flex-basis: calc(80%);
    background-color: #F1FAEE;
    padding: 2rem
}
.pie {
    background-color: #457B9D;
    text-align: center;
    color: white;
    padding: 2rem;
}

asi quedo mi ejercicio anterior sin flex y el de ahora con flex:
anterior:

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html{
	font-size: 62.5%;
}
body{
	font-size: 1.6em;
}
.menu{
	height: 10vh;
	width: 100%;
	background: #2099B6;
}
.menu__elemento{
	display: inline-block;
	margin-right: 1em;
	color: white;
}
.menu__elemento--logo{
	display: inline-block;
	margin-right: 65em;
	color: grey;
}

.imagenes-izquierda{
	display: inline-block;
	background: #FFAA00;
	width: 20vw;
	height: 90vh;
	position: absolute;
}
.contenido{	
	display: inline-block;
	background: #012E45;
	height: 90vh;
}
.contenido__parrafo{
	display: inline-block;
}
.imagenes-izquierda{

	height: 90vh;
}
.imagenes-izquierda__lista{
	display: flex;
	flex-direction: c;
	justify-content: flex-start;
	height:  90vh;
}
.imagenes-izquierda__elemento{
	display: block;

	width: 18vw;
	height: 21vh;
	background: red;
	border-radius: 10%;
} 

actual:

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html{
	font-size: 62.5%;
}
body{
	font-size: 1.6em;
}
.menu{
	width: 100vw;
	height: 10vh;
	background: rgb(32, 153, 182);
}
.menu__lista{
	display: flex;
	list-style: none;
	flex-wrap: nowrap;
	justify-content: flex-end;
}
.menu__elemento{
	margin-right: 1.2rem;
}
.menu__elemento--logo{
	flex-grow: 1;
}
.imagenes-izquierda{
	position: absolute;
	background-color: red;
	width: 20vw;
	height: 90vh;
}
.imagenes-izquierda__lista{
	height: 90vh;
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.imagenes-izquierda__elemento{
	height: 20vh;
	width: 18vw;
	border: .2rem  black; solid;
	border-radius: 10%;

	background-color: blue;
}

3. Uso de flex-grow

5. Uso de Flex-basis combinado con flex-grow :D

Les comparto una barra de navegaci贸n con display:flex.


.
HTML

<<body>
    <header>
        <nav>
            <div>
                <figure class="logo-header"><img src="./imgs/logo-small.jpg" alt=""></figure>
            </div>
            <ul>
                <li><a href="">Arriba</a></li>
                <li><a href="">Abajo</a></li>
                <li><a href="">Accesorios</a></li>
                <li><a href="">Contactanos</a></li>
            </ul>
            <figure class="carrito"><img src="./imgs/carrito-logo.jpg" alt=""></figure>
        </nav>
    </header>
</body>
</html>> 

CSS

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

body {
    font-size: 2rem;
    background-color: #154B52;
}

/* header */ /* header */ /* header */
/* header *//* header *//* header */
/* header *//* header *//* header */

nav {
    background-color: rgb(10, 10, 10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 17vh;
}

div figure.logo-header {
    padding: 0 5vw;
    cursor: pointer;
    transition: 0.6s;
}

div figure.logo-header:hover {
    transform: scale(1.2);
}

div figure.logo-header img {
    height: 70px;
    width: auto;
    border: 2px solid black;
    border-radius: 100px;
}

nav ul{
    list-style: none;
}

nav ul li {
    display: inline-block;
    padding: 0 20px;
}

figure.carrito {
    padding: 0 5vw;
    cursor: pointer;
    transition: 0.6s;
}

 figure.carrito:hover {
    transform: scale(1.5);
}

figure.carrito img {
    height: 60px;
    width: auto;
}> 

HTML

<!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">
    <link rel="stylesheet" href="./style.css">
    <title>Flex</title>
</head>
<body>

    <header>
        <a href="#" class="logo">
            <img src="../tareaLayout/img/logo.png" alt="logo de la tarea">
        </a>
        <nav>
            <!-- <a href="#" class="nav-link">Inicio</a>
            <a href="#" class="nav-link">Acerca de nosotros</a>
            <a href="#" class="nav-link">Contactos</a>
            <a href="#" class="nav-link">Login</a> -->

            <ul>
                <li><a href="#" class="nav-link">Inicio</a></li>
                <li>            <a href="#" class="nav-link">Acerca de nosotros</a></li>
                <li>            <a href="#" class="nav-link">Contactos</a></li>
                <li>            <a href="#" class="nav-link">Login</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <article>
                <img class="gonta" src="../../../CURSODEFINITIVOHTMLYCSS/HTMLdesde0barbon/gonta.jpg" alt="">
                <h2>todo sobre el sitioasdacAS</h2>
                <p>AASDASDASDASDD</p>

                <img class="hulk" src="./star.png" alt="">
                <p class="neon">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus odio, dicta repudiandae ratione aliquam voluptate expedita, asperiores inventore, reiciendis ea consectetur tempore totam repellat fugiat! Vel amet similique numquam labore.</p>
                <a href="">leer mas...</a>
            </article>
        </section>
        <aside>
            <h3>subtitulo</h3>
            <ul>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
            </ul>
            <br>
            <h3>subtitulo</h3>
            <ul>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
            </ul>
            <br>
            <h3>subtitulo</h3>
            <ul>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
                <li><a href="#">texto texto texto</a></li>
            </ul>
        </aside>   
    </main>
    <footer>
        <p>&copy; footer</p>
    </footer>
</body>
</html>

CSS

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

main{
    font-size: 1.6rem;
    background: url(./fondo.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    height: calc(90vh - 8rem);
}

 a{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    color: blanchedalmond;
    padding: 1rem;
    font-size: 3rem;
}
 
 header{
    display: flex;
    min-height: 70px;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(118, 31, 153, 0.863);
    clear: both;
    text-align: center;
    color: rgb(14, 0, 12);
}

nav li{

    display: inline-block;
}

.logo{
    display: flex;
    align-items: center;
}

.logo img{
    height: 8rem;
}

nav a{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    color: blanchedalmond;
    padding: 1rem;
    font-size: 3rem;
    font-weight: 600;
}

/* nav a:hover{
    color: rgba(69, 0, 87, 0.842);
    background-color: blueviolet;

} */

li:hover{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    animation-duration: 0.25s;
    text-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

@media (max-width:700px) {
    header{
        flex-direction: column;
    }
}
.gonta{

}
section{
    /* background-color: #efefef; */
    margin: 10px;
    width: 70%;
    float: left;
}

article{

}

article .gonta{
    width: 50px;
    height: 50px;
    margin: 2px;
    float: left;
    border-radius: 100px;
}
.hulk{
    align-items: center;
}
article .hulk{
    margin: auto;
    display: block;
    width: 70%;
    height: 50%;
}

article p, a{
    padding: 5px;

}

.neon, article h2, p, header nav a {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: justify;
	color: #fff;
  	text-shadow:
		0 0 5px rgb(247, 0, 255,1),
		0 0 10px rgba(247, 0, 255,1),
		0 0 20px rgba(247, 0, 255,1),
		0 0 40px rgba(38,104,127,1),
		0 0 80px rgba(38,104,127,1),
		0 0 90px rgba(38,104,127,1),
		0 0 100px rgba(38,104,127,1),
		0 0 140px rgba(38,104,127,1),
		0 0 180px rgba(38,104,127,1);
}

aside{
    float: right;
    margin: 10px;
    width: 25%;
}

aside h3{
    text-align: center;
    background-color: #afafaf38;
    color: #fff;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

aside ul li, aside ul li a{
    text-indent: 10px;
    display: block;
}

aside ul li a:link, aside ul li a:visited{
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 2rem;
    padding: 10px;
    transition: all 0.5s;

}

aside ul li a:hover, aside ul li a:active{
    text-indent: 20px;
    background-color: #70027a88
}

footer{
background-color: rgba(118, 31, 153, 0.863);  
    clear: both;
    text-align: center;
    color: #fff;
    padding: 10px;
}

footer p{
    font-size: 6rem;
    text-align: center;
}

Rellenar_Espacio con flex-grow

Consegui hacerlo aunque al inicio fue un poco frustante gracias a diego he mejorado y entiendo mucho mas como debo hacer las cosas
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">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <header class="container">
        <figure>
            <img src="https://logos-marcas.com/wp-content/uploads/2021/09/One-Piece-Logo.png" alt="Logo One Piece">
        </figure>
        <nav>
            <ul>
                <li>Escritor</li>
                <li>Personajes</li>
                <li>Leer Manga</li>
            </ul>
        </nav>
    </header>
    <main>
        <aside>
            <div class="div-lay">
                <p>Younkous</p>
                <figure>
                    <img class="img-lay" src="https://static.wikia.nocookie.net/onepiece/images/d/d6/Los_Cuatro_Emperadores.png/revision/latest?cb=20170519132944&path-prefix=es" alt="Younkous">
                </figure>
            </div>
            <div class="div-lay">
                <p>SuperNovas</p>
                <figure>
                    <img class="img-lay" src="https://static.wikia.nocookie.net/onepiece/images/b/ba/La_peor_generaci%C3%B3n.png/revision/latest?cb=20130331151918&path-prefix=es" alt="SuperNova">
                </figure>
            </div>
            <div class="div-lay">
                <p>Marine</p>
                <figure>
                    <img class="img-lay" src="https://static.wikia.nocookie.net/onepiece/images/b/be/Cuartel_general_de_la_Marine.png/revision/latest?cb=20210119210120&path-prefix=es" alt="">
                </figure>
            </div>
        </aside>
        <section>
            <h1>Mugiwaras</h1>
            <figure class="figu-mugi">
                <img class="img-mugi" src="https://i.ytimg.com/vi/Gan81b7kkrA/maxresdefault.jpg" alt="Los mugi">
            </figure>
            <p class="text-mugi">Los Piratas de Sombrero de Paja (楹︺倧銈夈伄娴疯硦鍥 Mugiwara no Kaizoku-dan), principalmente conocidos como la Banda de Sombrero de Paja (楹︺倧銈夈伄涓鍛 Mugiwara no Ichimi), es una banda de piratas originaria del East Blue, pero tiene miembros de diferentes partes del mundo. Ellos son el foco y los principales protagonistas de la trama del manga y el anime de One Piece, siendo capitaneados por el protagonista principal de la serie, Monkey D. Luffy.</p>
        </section>
    </main>
    <footer>
        <figure>
            <img class="img-footer" src="https://logos-marcas.com/wp-content/uploads/2021/09/One-Piece-Logo.png" alt="Logo One Piece">
        </figure>
        <div class="about">
            <p class="p-footer">Realizador Por</p>
            <p class="p-footer">Felipe Calder贸n</p>
        </div>
    </footer>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    color: white;
}
body{
    font-size: 1.6rem;
}
/* Header */
.container{   
    display: flex; 
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: cadetblue;    
    border: 0.5rem solid black;
}
figure img{
    height: 10rem;
    width: 15rem;
}
nav{
    display: flex;
}
nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
li{
    list-style: none;
    margin: 1rem;
    font-size: 2rem;
}

/* Contenido */
main{
    display: flex;
    background-color: purple;
    
    
}
aside{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    border-left: 0.5rem solid black ;
    border-bottom: 0.5rem solid black ;
}
div p{
    margin: 0.2rem;
    color: black;
}
.div-lay{
    display: flex;
    margin: 1rem;
    flex-wrap: nowrap;
    flex-direction: column;
    background-color: peachpuff;
    align-items: center;
}
.img-lay{
    width: 15rem;
    height: 10rem;
}
section{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-right: 0.5rem solid black ;
    border-left: 0.5rem solid black;
    border-bottom: 0.5rem solid black;    
}
h1{
    text-align: center;
    font-size: 4rem;
    margin: 2rem;
}
.figu-mugi{
    margin: 2rem;
    display: flex;
    justify-content: center;
}
.img-mugi{
    width: 40rem;
    height: 20rem;
}
.text-mugi{
    font-size: 3.2rem;
    text-align: justify;
    margin: 1rem;
}

/* Footer */
footer{
    display: flex; 
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: cadetblue;    
    border-bottom: 0.5rem solid black;
    border-left: 0.5rem solid black;
    border-right: 0.5rem solid black;
    align-items: center;
}
.img-footer{
    margin: 0.1rem;
    height: 7.3rem;
    width: 12rem;
}
.p-footer{
    margin-right: 1rem;
    font-size: 3.2rem;
    color: white;
}

Desaf铆o cumplido :篓v no era lo que esperaba pero estoy satisfecho.

<!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">
    <link rel="stylesheet" href="./styles.css">
    <title>Desafio 2</title>
</head>
<body>
    <header class="header__title">
        <figure>
            LOGO
        </figure>
       
       
        <nav class="nav__container">
            <a href=""></a>
            <ul>
               <li ><a href="">Home</a></li>
               <li> <a href="">Cursos</a></li>
               <li> <a href="">Instrucciones</a></li>
               <li> <a href="">Blog</a></li>                 
            </ul>               
        </nav>     
   </header>

       <main class="container">
        <article class="box1 box">
            <p>Modelo 1</p>
        </article>
        <article class="box2  box">
            <p>Modelo 2</p>
        </article>
        <article class="box3 box">
            <p>Modelo 3</p>
        </article>
        <article class="box4 box">
            <p>Modelo 4</p>
        </article>
        
</main>
<aside  class="container__aside">
    <div class="box_aside item_aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt inventore commodi id fuga sint magnam a laborum. Exercitationem ut sint magni eos minima? Vitae, error esse. Ad sit tempore expedita?</div><!-- box_aside contendor de caja -->
</aside>
</body>

<footer class="footer"> <!-- contenedor padre -->
    <p class="box__footer box"> Datos</p> <!-- hijos class -->
 
</footer>
</body>
</html>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    font-size: 1.8rem;


}
.header__title{
   
    background-color: rgb(92, 109, 185);

    
    
}
.nav__container ul{
    display: flex;   
    justify-content: flex-end;
    
    list-style-type: none;
    
}
.nav__container a{
    color: black;
    text-decoration: none;
    display: flex;   
    justify-content: flex-end;
    padding: 2rem;
    list-style-type: none;
    
}
.container{ /*contnenedor padre  */
    height:81vh;
    
    border: 0.3rem black solid;
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(114, 250, 186)
}
    
body{
    background-color: yellowgreen;
    font-size: 2.5rem;
}
    


.box{ /*contnenedor hijo que hereda  */

    
    width: 23rem;
    height: 15rem;
   
    border-radius: 1rem;

}
.box1{/*contnenedor hijo que hereda  */
    background-color: rgb(189, 190, 219);

}
.box2{/*contnenedor hijo que hereda  */
    background-color: rgb(174, 106, 236);
    
}

.box3{/*contnenedor hijo que hereda  */
    background-color: cadetblue;
}

.box4{/*contnenedor hijo que hereda  */
    background-color: rgb(173, 58, 81);
    
}



.box6{/*contnenedor hijo que hereda  */
    background-color: beige;
    
}

.container__aside{
    position: absolute;
  left: 20vh;
  width: 15vh;
  bottom: 81vh;
  

 
}
  
.box_aside{ /* Adentro de la caja */
    width: 22rem;
    height: 10rem;

   
    
 
   
}
.item_aside{
    width: 50rem;
    

    
}


.footer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: rgb(92, 109, 185);
    padding: 0.1rem;
    
}

Desaf铆o logrado!!!

ANTES

DESPU脡S

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>Layout</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <figure>Logo</figure>
      <nav>
        <ul>
          <li>Home</li>
          <li>Cursos</li>
          <li>Instructores</li>
          <li>Blog</li>
        </ul>
      </nav>
    </header>
    <main>
      <aside>
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
       </ul>
      </aside>
      <section>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia
          aperiam dicta, obcaecati facere praesentium, temporibus dolorum porro
          itaque labore perferendis fugit quidem modi magni nesciunt, quo
          voluptatibus id alias fugiat?
        </p>
      </section>
    </main>
    <footer>
      <p>About us</p>
    </footer>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
body {
  width: 100vw;
  height: 100vh;
  font-size: 2rem;
}
header {
  height: 9rem;
  display: flex;
  justify-content: space-between;
  background-color: pink;
}
nav {
  width: 30vw;
}
nav ul {
  display: flex;
  justify-content: space-around;
}
figure {
  padding-left: 20px;
  margin-top: 25px;
}
nav ul li {
  list-style: none;
  margin-top: 25px;
}
main {
  height: 45rem;
  display: flex;
  background-color: grey;
}
aside {
  width: 30%;
  display: flex;
  background-color: salmon;
}
main aside ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
main section {
  text-align: justify;
}
aside ul li {
  width: 200px;
  height: 80px;
  padding-left: 10px;
  list-style: none;
  background-color: brown;
}
footer {
  height: 8.5rem;
  display: flex;
  align-items: center;
  background-color: darkorange;
}

Volv铆 a hacer la maqueta del Layout ahora con flexbox, fue infinitamente menos estresante y m谩s f谩cil

Desafio logrado. Antes habia hecho el layout con los conocimientos que tenia de display: inline-block y position, pero ahora lo modifique todo e incorpor茅 display: flex.

Comparto mi codigo
HTML

CSS


Aqui comparto otro intento XD

html

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Layout</title>
<link rel=鈥渟tylesheet鈥 href="./style.css">
<link rel=鈥渟tylesheet鈥 href="./style2css">
</head>
<body>
<header>
<nav>este es el menu</nav>
</header>
<main>
<aside>
<ul>
<li>Categoria 1</li>
<li>Categoria 2</li>
<li>Categoria 3</li>
<li>Categoria 4</li>
</ul>
</aside>
<article>
<section class=鈥淚ncidencia鈥>
<figure>
<img src="./img/Edificio Pardo.png" alt=鈥淓dificio Pardo鈥 width=鈥100%鈥>
</figure>
<P>Edificio Pardo</P>

        </section>
    </article>
</main>
<footer>pie de p谩gina</footer>

</body>
</html>

css

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

header{
background-color: blue;
height: 5vh;
}

main{
margin: 0%;
display: flex;
height: 85vh;
align-items: stretch;
}

aside{
width: 30%;
display: flex;
background-color: rgb(48, 108, 112);
}

main aside ul {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
aside ul li {
width: 250px;
height: 150px;
padding-left: 10px;
list-style: none;
background-color: brown;
}
figure{
width: 100%;;
}

footer{
background-color: red;
height: 10vh;
}