CSS CSS Flexbox Layout Flexbox Properties Growing and Aligning Flex Items

Simon Madsen
Simon Madsen
746 Points

align-self: stretch; does not work. And I can't see the preview. Neither in Safari nor Chrome

The preview does not seem to work, making it hard to complete the task

/* Complete the challenge by writing CSS below */

.row {
  display: flex;
  align-items: stretch;

.column {
  align-self: stretch;
<!DOCTYPE html>
    <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">
    <div class="row">   
      <div class="secondary column">
        <h2>How to get here</h2>
        <p>Tiramisu caramels gummies chupa.</p>

      <div class="primary column">
        <p>Everything in this city is worth waiting in line for.</p>
        <img src="treats.svg" alt="treats">

      <div class="tertiary column">
        <h2>Great food</h2>
        <p>Croissant macaroon pie brownie.</p>

1 Answer

Trevor Johnson
Trevor Johnson
14,427 Points

Hi Simon, You need to use the flex-grow property on the flex-child column element instead of align-self. The flex-grow determines what amount of the available space a flex-child should take up based on the input value.

Your code should look like this:

.column {
  flex-grow: 1;