Flex items display vertically and won't actually “flex”

Question

With the code below I am attempting to practice a simple header with flex content below it. The content is generic lorem ipsum with a background image. Unfortunately, when I run the code, the items do not "flex." they just show up in a vertical line. Any idea what I am doing wrong?

also, bonus question - when I do a background image, how do I get it to automatically shrink to fit the size of its container?

Thanks!

Brian

Tried manipulating the flex qualities and also looked up similar questions.

 header {
    height: 80px;
    width: 1235px;
    display: flex;
    background-color: gray;
    color: black;
    vertical-align: middle;
    justify-content: center;
}

header h1{
    background-color: gray;
    color: black;
}

.flex{
    height: 1000px;
    width: 1235px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.box{
    width: 250px;
    height: 250px;
    background-image: url(./WS1.jpg);
    background-repeat: no-repeat;
    margin: 5px;
}

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="./GReat.css">
        <title>Great</title>
    </head>
    <body>
        <header>
            <h1>This Page is Great!</h1>
        </header>
        <div class="Flex">
            <div class ="box">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>
            <div class ="box">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>
            <div class ="box">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>
            <div class ="box">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>
        </div>  
  </body>
</html>

Obsidian Age Obsidian Age · Accepted Answer · 2019-08-25T22:39:45

Your parent element has the class Flex, which is not the same as flex. Changing it to flex shows your elements flexing as expected:

header {
  height: 80px;
  width: 1235px;
  display: flex;
  background-color: gray;
  color: black;
  vertical-align: middle;
  justify-content: center;
}

header h1 {
  background-color: gray;
  color: black;
}

.flex {
  height: 1000px;
  width: 1235px;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.box {
  width: 250px;
  height: 250px;
  background-image: url(./WS1.jpg);
  background-repeat: no-repeat;
  margin: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./GReat.css">
  <title>Great</title>
</head>

<body>
  <header>
    <h1>This Page is Great!</h1>
  </header>
  <div class="flex">
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>

</body>

</html>

However, note that you have a fixed width of 1235px, which won't display well on mobile devices. I'd recommend adding in max-width: 100% to both header and .flex, so that it displays correctly for mobiles.

As for your background images, the .box class has a fixed width and height of 250px, sothe images will automatically shrink to that dimension. This can be seen in the following:

header {
  height: 80px;
  width: 1235px;
  max-width: 100%;
  display: flex;
  background-color: gray;
  color: black;
  vertical-align: middle;
  justify-content: center;
}

header h1 {
  background-color: gray;
  color: black;
}

.flex {
  height: 1000px;
  width: 1235px;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.box {
  width: 250px;
  height: 250px;
  background-image: url("https://placehold.it/1000");
  background-repeat: no-repeat;
  margin: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./GReat.css">
  <title>Great</title>
</head>

<body>
  <header>
    <h1>This Page is Great!</h1>
  </header>
  <div class="flex">
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>

</body>

</html>

Flex items display vertically and won't actually “flex”

1 Answers