我已经为容器设置了 display: flex 和 flex-wrap 但是它的项目没有包装答案

【问题标题】：i have set display: flex and flex-wrap for a container however its items are not wrapping我已经为容器设置了 display: flex 和 flex-wrap 但是它的项目没有包装
【发布时间】：2022-01-22 05:46:43
【问题描述】：

代码：

 

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .header {
      height: 72px;
      background: darkmagenta;
      color: white;
      font-size: 32px;
      font-weight: 900;
      padding-left: 16px;
      display: flex;
      align-items: center;
    }
    
    .footer {
      height: 72px;
      background: #eee;
      color: darkmagenta;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .sidebar {
      width: 300px;
      background: royalblue;
      flex-shrink: 0;
      padding: 16px;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    li {
      margin-bottom: 16px;
    }
    
    a {
      text-decoration: none;
      color: white;
      font-size: 24px;
    }
    
    .card {
      border: 1px solid #eee;
      box-shadow: 2px 4px 16px rgba(0,0,0,.06);
      border-radius: 4px;
      margin: 16px;
      padding: 16px;
    }
    
    .container {
      padding: 32px;
      display: flex;
      flex-wrap: wrap;
    }
    
    .body {
      display: flex;
      flex: 1;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>The Holy Grail</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="header">
        MY AWESOME WEBSITE
      </div>
      <div class="body">
        <div class="sidebar">
          <ul>
            <li><a href="google.com">⭐ - link one</a></li>
            <li><a href="google.com">????????‍♂️ - link two</a></li>
            <li><a href="google.com">????️ - link three</a></li>
            <li><a href="google.com">???????? - link four</a></li>
          </ul>
        </div>
        <div class="container">
          <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
          <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
          <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
          <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
          <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
          <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
        </div>
      </div>
      <div class="footer">
        The Odin Project ❤️
      </div>
    </body>
    </html>

在这里我添加了显示：flex;和 flex-wrap: 换行；用于类容器，将类卡作为弹性项目。然而，卡片没有包装。我检查了父正文，它设置了display: flex;，所以我不知道我哪里出错了。

This is the output I am getting

This is the desired outcome

【问题讨论】：

您的卡片太宽，需要限制宽度。
通过给它们定义一些宽度。
要为 cmets 添加更多上下文，默认情况下，块元素将占据其父容器宽度的 100% - 这就是为什么您需要为.card 元素。

标签： html css flexbox

【解决方案1】：

您可以将固定宽度应用于您的cards。在不定义宽度的情况下，flex-box 将尝试根据屏幕大小确定它们的宽度。如果您设置固定宽度，则卡片将在调整浏览器大小时保持该宽度，然后容器上的 flex-wrap: wrap; 将在没有足够空间时启动并包裹它们。我将width: 350px; 添加到您的card 中，请参阅下面的更改。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 72px;
  background: darkmagenta;
  color: white;
  font-size: 32px;
  font-weight: 900;
  padding-left: 16px;
  display: flex;
  align-items: center;
}

.footer {
  height: 72px;
  background: #eee;
  color: darkmagenta;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar {
  width: 300px;
  background: royalblue;
  flex-shrink: 0;
  padding: 16px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 16px;
}

a {
  text-decoration: none;
  color: white;
  font-size: 24px;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0,0,0,.06);
  border-radius: 4px;
  margin: 16px;
  padding: 16px;
  width: 350px;
  min-width: 150px;
}

.container {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
}

.body {
  display: flex;
  flex: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Holy Grail</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    MY AWESOME WEBSITE
  </div>
  <div class="body">
    <div class="sidebar">
      <ul>
        <li><a href="google.com">⭐ - link one</a></li>
        <li><a href="google.com">??‍♂️ - link two</a></li>
        <li><a href="google.com">?️ - link three</a></li>
        <li><a href="google.com">?? - link four</a></li>
      </ul>
    </div>
    <div class="container">
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
      <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    </div>
  </div>
  <div class="footer">
    The Odin Project ❤️
  </div>
</body>
</html>

【讨论】：

为什么要在这里使用固定宽度？为什么不是百分比或响应宽度？使用固定宽度会产生溢出问题。
@disinfor IMO 固定宽度在调整大小时保持卡片宽度的完整性。如果我使用%'s，它将基于屏幕宽度，使卡片在移动设备上变得非常瘦。我想使用25vw 会很好，但最终在移动屏幕上仍然会很瘦。
固定宽度对于响应式网站来说很糟糕。在这种情况下，固定宽度不是一个好的解决方案。根据您的评论，设置固定宽度会使卡片溢出 y 轴并创建水平滚动。
@disinfor 我不同意。我同意固定宽度对响应式网站尤其不利，但在这种情况下，这并不是因为它是card 的子元素，并且有一个与之关联的 flex-box 可以自动包装每张卡片。卡片溢出 x 轴，现已更正。
我质疑您使用固定宽度的事实。 OP接受了不同的答案不是我的错。我没有否决你的回答 - 这更像是一个争议而不是简单的评论。

【解决方案2】：

确保您的弹性项目具有最大宽度。而不是主容器将被包装。

.card {

  max-width: 200px;
}

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。