Question

使用下面的代码，我试图在其下面练习一个带有flex内容的简单标题。内容是带有背景图像的通用lorem ipsum。不幸的是，当我运行代码时，这些项目并不“灵活”。它们只是以垂直线显示。知道我在做什么错吗？

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

谢谢！

布莱恩

尝试操纵柔韧性，并查找了类似的问题。

 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

您的父元素具有类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>

不过，请注意，您拥有固定的width 1235px，max-width: 100%在移动设备上无法很好地显示。我建议将header和.flex都添加到.box中，以便为移动设备正确显示。

对于您的背景图像，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>这样图像将自动缩小到该尺寸。这可以在以下内容中看到：

{{1}}

{{1}}

弹性项目会垂直显示，实际上不会“弯曲”

1 个答案: