Flexbox exercises question

Why does this exercise default to align-items: stretch;?

This is what it looks like when I set align-items to something else

Please include a link to the challenge. Also, please copy-paste your actual code into a post rather than using a screenshot.

Here’s the challenge: https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property

And here’s the code:

  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    align-items: flex-end;
  #box-1 {
    background-color: dodgerblue;
    width: 200px;
    font-size: 24px;

  #box-2 {
    background-color: orangered;
    width: 200px;
    font-size: 18px;

<div id="box-container">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
1 Like

Each property in CSS has a default value that is used if the property has not been explicitly defined. If flexbox is being used and no alignment has been specified, align-items defaults to a value of stretch.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.