Flexbox layouts

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.

Anthony Ismael Manotoa Moreno

Platzi Team

Lo logreee!! 🥳🥳🥳 Me encantó descubrir flex

Antes

Después

Jhean Pacheco

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.

Carlos David Ramírez Gómez

Listo! mejorado el reto con el uso de flexbox

**Antes: **

Despues:

Jhean Pacheco

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;
}

Juan Jose Arcani

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;
}

Héctor Alonso Padilla Ramírez

<!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;
}

Andres Badillo

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;
}

Anderson Josué Oroya Silva

Me imaginé hacer la página de una tienda de café 😍

Alessandra García

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 😃

Lucas Martinez Asensio

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;
}

Juan Torrealba

Irving Juárez

Aquí el resultado de mi diseño responsive y aquí el código fuente

Anthony Ismael Manotoa Moreno

Platzi Team

<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.

Edison Manrique

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/

Carol Natalia Ramirez Gil

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

Así quedó con Flex:

También estuve estudiando con Flexbox Froggy y Flexbox Zombies

Freddy Aldair Muñoz Huasasquiche

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

CODIGO

Arnaldo José Cisneros Zambrano

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:

Diego Alvaro Parra Abad

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;
}

Roberto Andrés Valenzuela Araya

Comparto mi Layout con Flexbox

Y el después con el relleno

ERWIN CEDEÑO

Ya con esto se puede hacer mucho XD

Raúl Adolfo Sánchez Rodríguez

Se preguntan

¿porqué si aun elemento no le asigno un orden va al principio?

La respuesta es: Su propiedad “order” por default" es CERO

En el siguiente ejemplo a la única caja que no se le asignó orden fue a la N° 06.

Emmanuel Cázarez Perea

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;
}

Yoshirys de Jesús Salas Corona

SIN FLEXBOX

CON FLEXBOX

angelqui

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

Francisco Javier Catalan Serrano

De pana que el desafio usando flex es una autentica maravilla. Sin el flex sentí una frustración. Amé flexbox!

Cristian Daniel Jesus Rios

Costo pero algo salio jejeje a seguir practicando y mejorando el code! 😄 me inspire en el cafe 😛

Andres Camilo Rincón Valencia

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;
}
>

Anggi Vanesa Pallares Solis

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

Anggi Vanesa Pallares Solis

Keyla Conde Sánchez

Mi desafío mejorado con Flex.

Ricardo Alexander Pérez Méndez

Dejo mi layout hecho con Flex

funk_gabo

flex.basis
https://developer.mozilla.org/es/docs/Web/CSS/flex-basis

Carlos Valencia

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.

Juan Manuel Fallo

Práctica con Flexbox

Carlos Ramos

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.

Cristopher Joshua Rivas Sanjines

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.

Andrés Mejía López

Reordenar Bloques

Daniel Julián Vargas Jaime

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

Anggi Vanesa Pallares Solis

Keyner Luque

mi aporte, es una evolucion del que hice sin flexbox

Hugo Herrera

Utilizando Flex 😄

GERMAN GARCIA

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.

Jossie Steeven Quintero Giron

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

user_deleted_1572741

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

Jossie Steeven Quintero Giron

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

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

Andres Fernando Saa Montaño

Les comparto un recurso que me gusta mucho usar cuando necesito Flexbox.
👉🏾https://css-tricks.com/snippets/css/a-guide-to-flexbox/👈🏾

HERBERTH FITZROY GARCIA CHURA

hace 7 meses

Modifique todo utilizando display y flexbox y me quedo de esta manera![](https://static.platzi.com/media/user_upload/image-256f87ea-07ad-4348-89a6-86fff5a7fcb7.jpg)

Jossie Steeven Quintero Giron

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;

Genny Sandoval Duarte

Fue demorado superar este reto, tuve que investigar y hacer muchas pruebas, pero lo logré 👏

jazminlizette

Comparto los apuntes de la clase 😃

Ricardo Alfonso Chavez Vilcapoma

Al ver la parte final…

Mateo Paloma

Demasiada buena está clase.

Arukay Learning

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

Maria Esther Mendoza Zafra

Les comparto el resultado del desafío con flexbox:

John Steven Bernal Gonzalez

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

Captura de Pantalla 2020-10-11 a la(s) 20.37.33.png

Jonathan David Olivos

😄 La documentación de los temas vistos:

Jose Luis Quintero Sánchez

Les comparto la modificiación de mi layout usando Flex

David Ospina Benítez

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.

marco antonio

siguiendo con la tradición

antes
depues

Zoe Uribe Eugenio

Así termina la actualización del reto con Display Flex… Excelente curso y bien explicado

![](

Carlos Machado

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

Miguel Ángel Hinojosa Sejas

Display Flex nos hace la vida más simple a la hora de posicionar los contenedores 😀💚

Luis Yesid Peña Florian

Entender FlexBox es como tener superpoderes 💚
Reto cumplido 👌

Reinaldo Mendoza

<!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;
}

Alexandra Gabriela

Andres Lanza Gaye

Esta imagen puede ayudar con flex:

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

Iván Alejandro Gaitán Pardo

Mi aporte del reto:

WhatsApp Image 2023-04-23 at 21.50.26.jpg

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;
}

Juan Cortez

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;
}

Pablo Diaz

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.

Brenda Lara

Llevo su tiempo, pero sirvio la practica

Gerardo Sayago

Es poco pero es trabajo honesto

Santiago Pérez

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

David Arellano Cruz

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.

Raúl Adolfo Sánchez Rodríguez

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

Oscar Alexánder Ortiz Beltrán

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

Vladimir Farrera Vera

Captura de Pantalla 2022-10-31 a la(s) 17.29.56.png

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;
}

Felipe Moreno

Tarea completada

Flavio Salado Nava

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;
}

Jorge Elías Escobedo Jiménez

https://www.youtube.com/watch?v=ZB6__HrjtqA&ab_channel=D-FormaciónCrónica

Explicación ALIGN ITEMS Y CONTENT 👌

Christian Alexander Palacios Chávez

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;
}

cristian david palomino porras

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;
}

Jorge Mendoza

_C__Users_Usuario_OneDrive_CARRERA20INGENIERIA20DE20SOFTWARE_Curso20definitivo20de20HTML20y20CSS_CSS_desafioFLEX_Intento202_index.html(Nest Hub Max).png

Ariel Hernán

3. Uso de flex-grow

Ariel Hernán

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

Elias Yoel Romero Sánchez

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;
}>

jhonatan89

Alfredo Paucara

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;
}

Alejandro Josue Martínez Bohorquez

Santiago Velandia Gallo

Andrés Mejía López

Rellenar_Espacio con flex-grow

Felipe Calderón

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;
}

Leonel Luna

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;
    
}

Erika Nathaly Bernal Morales

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;
}

Cristian Esquivel

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

Leal Brigitte

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

Richard Hernández

Aqui comparto otro intento XD

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">
<link rel=“stylesheet” 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=“Incidencia”>
<figure>
<img src="./img/Edificio Pardo.png" alt=“Edificio 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;
}

Eduardo Peña Ramos

En esta clase aprendí que el stretch es super útil para “estirar” o “rellenar” todo.
Y el “baseline” para que la caja se adapte al contenido (texto).
flex-wrap y flex-grow también tienen mucha aplicación, le veo mucho potencial para el responsive. 😄

Cesar Ochoa

Me costó mucho antes de flexbox, y este en menos de 10 minutos quedó 😄

Maria Eugenia Alonso