Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Diseño de Diseño CSS Flexbox Crear un diseño con Flexbox Desafío de Columnas Flexbox

Publicado por Nicholas Chetto
Nicholas Chetto
4,221 Puntos

Luego, establece las columnas para que se expandan uniformemente y se muestren en una línea, con un ancho inicial de 300px.

hola a todos, actualmente estoy teniendo problemas. He vuelto a escuchar todos los videos y he estudiado mucho pero aún no puedo resolver esto, cualquier ayuda sería excelente y muy apreciada, gracias.

style.css 
/* Completa el desafío escribiendo CSS a continuación */

.row {
  mostrar: flex;

}

.columnas{
  mostrar: flex;
  flex: 1;
  flex-basis: 0;
  ancho:300px;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Diseño Flexbox</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='hoja de estilos' type='texto/css'>
    <link rel=stylesheet href=page.css>
    <link rel=stylesheet href=style.css>
  </head>
  <body>
    <div class=fila>   
      <div class=columna secundaria>
        <h2>¡Bienvenido!</h2>
        <p>Todo en esta ciudad vale la pena esperar en la fila. Cupcake ipsum dolor sit.</p>
        <p>Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
      </div>

      <div class=columna principal>
        <h2>Cómo llegar aquí</h2>
        <p><strong>Avión: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p>
        <p><strong>Tren: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin.</p>
        <p><strong>Coche: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>
      </div>

      <div class=columna terciaria>
        <h2>Gran comida</h2>
        <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread.</p>
        <p>Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
      </div>
    </div>
  </body>
</html>

1 Respuesta

Katie Wood
Katie Wood
19,141 Points
Katie Wood
Katie Wood
19,141 Points

Hola, parece que tenías la idea correcta - ambas propiedades que necesitas están allí. Esto es lo que estamos haciendo:

  • si miras en el archivo html, la clase es .column, en lugar de .columns, así que eliminemos esa 's'
  • no necesitamos hacer display: flex - eso indica un contenedor flex, pero ya tenemos .row con display: flex, ¡así que estamos bien! Nuestras columnas ya están dentro de un contenedor flex
  • necesitamos expandir uniformemente y mostrar en una línea - ya lo hiciste con flex: 1 :thumbsup:
  • ahora, podemos combinar tus últimas dos propiedades - flex-basis representa el ancho inicial, así que solo queremos tomar ese valor de ancho y asignarlo a flex-basis en su lugar

Esto es lo que tenemos ahora:

/* Completa el desafío escribiendo CSS a continuación */

.row {
  mostrar: flex;

}

.columna{
  flex-grow: 1;
  flex-basis: 300px;
}

Hay una guía visual bastante agradable guía visual para flexbox - tiene algunas visualizaciones agradables de lo que cada propiedad realmente hace.

¡Buena suerte!