Flexbox layouts

https://flexboxfroggy.com/#es

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

Saludos 😄

Carlos Adrian Rodriguez Bernales

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

Yair Lira

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

Jhean Carlos Pacheco Bermúdez

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:

Jossie Steeven Quintero Giron

CSS Flexbox Cheatsheet (link)

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

Que lo disfruten!

Daniela Wario

Su guia de confianza 😉

Jhean Carlos Pacheco Bermúdez

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:[email protected];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;
}

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

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

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 😃

Anderson Josué Oroya Silva

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

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

Juan Torrealba

Irving Juárez

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

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

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/

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.

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:

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

ERWIN CEDEÑO

Ya con esto se puede hacer mucho XD

Yoshirys de Jesús Salas Corona

SIN FLEXBOX

CON FLEXBOX

Roberto Andrés Valenzuela Araya

Comparto mi Layout con Flexbox

Y el después con el relleno

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

Ricardo Alexander Pérez Méndez

Dejo mi layout hecho con Flex

Francisco Javier Catalan Serrano

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

angelmigurd

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

Keyla Carolina Conde Sánchez

Mi desafío mejorado con Flex.

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

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.

Anggi Vanesa Pallares Solis

Keyner Luque

mi aporte, es una evolucion del que hice sin flexbox

Cristian Daniel Jesus Rios

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

Anggi Vanesa Pallares Solis

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

Hugo Herrera

Utilizando Flex 😄

Anggi Vanesa Pallares Solis

iecgerman

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.

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

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.

funk_gabo

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

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/👈🏾

Mateo Paloma

hace un mes

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:

Andrés Mejía López

Reordenar Bloques

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

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;

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

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:

Zoe Uribe Eugenio

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

![](

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.

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 Omar Mendoza Leal

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

Santiago Pérez

hace un mes

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

Ricardo Alfonso Chavez Vilcapoma

hace 16 días

Al ver la parte final…

David Arellano Cruz

hace un mes

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

hace 3 meses

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

hace 5 meses

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

hace 5 meses

Tarea completada

Piervil Jacques

hace 4 meses

Misión completada

jazminlizette

Comparto los apuntes de la clase 😃

Flavio Salado Nava

hace 8 meses

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 Contini

3. Uso de flex-grow

Ariel Contini

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

Elías 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

hace 8 meses

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

edupr

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

mucho mas sencillo

franklyn Valdez

Versión realizada con flex.
(

Paola Pastran Bernal

Mucho mas fácil todo con Flex, esto fue lo que logre.

carlos jimenez

Dario Paladines

Tanto que nos hizo sufrir con el desafio anterior, a mi por poco me toco ir casi contando los pixeles para que coincidan colocando 108.3px jaja pero con esto se facilita bastante

Wilson Aguilar