Flexbox layouts

Curso Definitivo de HTML y CSS

Web Developer Fundamentals

¿Qué aprenderás sobre HTML y CSS?

¿Qué es el Frontend?

¿Qué es Backend?

¿Qué es Full Stack?

Páginas Estáticas vs. Dinámicas

HTML

HTML: anatomía de una página web

Index y su estructura básica: head

Index y su estructura básica: body

Reto: crea tu lista de compras del supermercado

Anatomía de una etiqueta de HTML

Etiquetas multimedia

Tipos de imágenes

Optimización de imágenes

Etiqueta img

Etiqueta figure

Etiqueta video

Formularios

Etiqueta form e input

Calendar

Autocomplete y require

Select

Input type submit vs. Button tag

CSS

¿Qué es CSS?

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

Pseudo clases y pseudo elementos

Anatomía de una regla de CSS

Modelo de caja

Herencia

Especificidad en selectores

Demo de especificidad y orden en selectores

Más sobre selectores

Combinadores: Adjacent Siblings (combinators)

Combinadores: General Sibling

Combinadores: Hijo y Descendiente

Medidas

Medidas EM

Medidas REM

Max/Min width

Position

Display

Desafío: Layout 1

Display Flex

Flexbox layouts

Variables

Web fonts

Responsive Design

Responsive design: media queries

Estrategias de responsive: mostly fluid

Implementando mostly fluid

Layout shifter CSS

Column drop

Buenas prácticas y ejemplos de responsive

Imágenes responsive

Accesibilidad

Semántica

Textos

Labels, alt y title

Próximos pasos

Próximos pasos como Web Developer

Bonus: tabla de etiquetas HTML

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to position containers horizontally and vertically with Flexbox?

Flexbox is a powerful CSS tool that allows you to align and distribute space between elements in a container, making it simple and efficient for both horizontal and vertical orientations. In the previous classes, we focused on horizontal layout, but the real power of Flexbox manifests itself when you want to align elements vertically.

How to change the orientation of containers?

To change the orientation of containers and bring the content to the center or edges of the parent container, you can use Flexbox with specific properties:

Height of the parent container: first, you need to set the height of the parent container. For example, assigning a height using relative units, such as 50vh, will ensure that it occupies 50% of the screen height.
align-items property: This property centralizes the content vertically with options such as:
- center: aligns the content to the center of the container.
- flex-start: Places the content at the top.
- flex-end: Sends the content to the end of the container.

What Flexbox properties affect the growth and order of containers?

Flexbox also allows you to manipulate the growth of containers and their order without changing the HTML, which simplifies responsive design.

align-items property : stretch: Used to stretch the content to fill the space of the parent container. This will work only if no fixed height is defined for the child elements.
flex-grow property: One of the most useful features, it allows to adjust the area in which a specific container can grow when there is extra space:
```
.box1 { flex-grow: 1;}
```
In this example, box 1 will grow to occupy the available space.
Order property: Allows to change the position of child elements within a container. An element with a lower order will be placed before those with a higher order.
```
.box1 { order: 2; }.box2 { order: 1; }
```
Here, box2 will appear before box1, regardless of how it was written in the HTML.

What are the benefits of using `flex-wrap` in Flexbox?

When space becomes limited, Flexbox makes it easy to group elements in multiple lines without additional complications in CSS, thanks to the use of the flex-wrap property.

Wrap effect: By activating this property, your containers will be automatically distributed on new lines as needed.
```
.container { flex-wrap: wrap;}
```
This is especially useful for adapting to different screen sizes, a key feature for responsive web design.

Why choose Flexbox for responsive design?

Flexbox is a versatile tool for scalable layouts that automatically adapt to different devices and screen sizes. Its ability to remap elements without the need to dismantle the underlying CSS makes it ideal for responsive design, allowing elements to behave predictably as the viewport is resized.

The power of Flexbox lies in its simplicity and advanced functionality, saving time and effort in creating user interfaces that elegantly respond to user needs. As a practical task, try re-creating a layout with Flexbox focusing on vertical alignment and play with different screen dimensions to see how the containers respond - you will be surprised by the results!

Flexbox will become your essential ally in responsive design, making the task of creating complicated interfaces more manageable and less frustrating. You are ready to venture further into Flexbox, and remember, practice and experimentation will be your tools to master this powerful CSS module.

Contributions 489

Questions 48

Sort by:

Want to see more contributions, questions and answers from the community?

Carlos Adrian Rodriguez Bernales

4 years ago

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

5 years ago

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

Antes

Después

Jhean Pacheco

5 years ago

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

5 years ago

Listo! mejorado el reto con el uso de flexbox

**Antes: **

Despues:

Jhean Pacheco

5 years ago

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

Héctor Alonso Padilla Ramírez

5 years ago

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

5 years ago

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

Andres Badillo

If you already have an account,

Curso Definitivo de HTML y CSS

Flexbox layouts

How to position containers horizontally and vertically with Flexbox?

How to change the orientation of containers?

What Flexbox properties affect the growth and order of containers?

What are the benefits of using flex-wrap in Flexbox?

Why choose Flexbox for responsive design?

Antes

Después

Clase 41 - Flexbox layout

siguiendo con la tradición

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

What are the benefits of using `flex-wrap` in Flexbox?