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 Jirka Michalik
Jirka Michalik
11,573 Puntos

Mostremos anchos iguales, pero flexibles, para las columnas. Crea una nueva regla que se dirija a las columnas. Luego, establec

¿Alguien puede ayudarme por favor? Realmente no sé cómo hacer eso :/

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

.row {
  mostrar: flex;
}

.columna {
  flex: 1;
  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>

2 Respuestas

Nick Yoho
Nick Yoho
6,957 Puntos
Nick Yoho
Nick Yoho
6,957 Puntos

¡Muy cerca! En lugar de agregar la propiedad width, solo agrega los 300px a continuación en flex como el valor de flex-basis. Flex-basis es lo que establece el valor inicial del elemento.

.row {
  mostrar: flex;
}

.columna {
  flex: 1 300px;
}

Alternativamente, podrías declararlo separado de flex 

.row {
  mostrar: flex;
}

.columna {
  flex: 1;
  flex-basis : 300px;
}
Jirka Michalik
Jirka Michalik
11,573 Puntos
Jirka Michalik
Jirka Michalik
11,573 Puntos

Gracias colega... ¡eres increíble!