css flexbox layout

Question

how to do the below task

set the column to the expand and display on one line when they are 300px or wider. But when the columns are narrower than the 300px , the browser will distribute the space and display them on multiple lines.

style.css

/* Complete the challenge by writing CSS below */

.row {
  display: flex;
}

.column  {
  display: flex;
  height: 300px;
  flex-grow: 1em;
  flex-wrap: wrap;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="row">   
      <div class="secondary column">
        <h2>Welcome!</h2>
        <p>Everything in this city is worth waiting in line for. Cupcake ipsum dolor sit.</p>
        <p>Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
      </div>

      <div class="primary column">
        <h2>How to get here</h2>
        <p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p>
        <p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin.</p>
        <p><strong>Car: </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="tertiary column">
        <h2>Great food</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>

Answer 1 · 2016-02-27T16:16:05Z

February 27, 2016 4:16pm

Here's a few hints:

display:flex is a container property, you don't need it in the column and the row has it already
flex-wrap is also a container property, not an item(column) property
height is not important to the challenge
the desired width can be specified with the flex-basis property
flex-grow takes a number, not width units. Any number but 0 will do what you want (1 is typical)

Welcome to the Treehouse Community

Looking to learn something new?

Upeksha Liyanaarachchi

Upeksha Liyanaarachchi

css flexbox layout

1 Answer

Steven Parker

Steven Parker