弹性项目垂直显示，实际上不会 "flex"

Question

使用下面的代码，我正在尝试练习一个简单的 header，下面是 flex 内容。内容是带有背景图像的通用 lorem ipsum。不幸的是，当我运行代码时，项目不会 "flex." 它们只是显示在一条垂直线上。知道我做错了什么吗？

还有一个额外的问题 - 当我制作背景图片时，如何让它自动缩小以适合其容器的大小？

谢谢！

布莱恩

尝试操纵弹性质量并查找类似问题。

 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>

Answer 1

您的父元素具有 class Flex，这与 flex 不同。将其更改为 flex 显示您的元素按预期弯曲：

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>

但是请注意，您有 1235px 的固定 width，这在移动设备上显示效果不佳。我建议将 max-width: 100% 添加到 header 和 .flex，以便在手机上正确显示。

至于您的背景图片，.box class 的 width 和 height 固定为 250px，因此图片会自动缩小到尺寸。这可以在下面看到：

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"

Flex items display vertically and won't actually "flex"

css

flexbox

display