我已经为容器设置了 display: flex 和 flex-wrap 但是它的项目没有包装
Posted
技术标签:
【中文标题】我已经为容器设置了 display: flex 和 flex-wrap 但是它的项目没有包装【英文标题】：i have set display: flex and flex-wrap for a container however its items are not wrapping 【发布时间】：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 元素。
【参考方案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。以上是关于我已经为容器设置了 display: flex 和 flex-wrap 但是它的项目没有包装的主要内容，如果未能解决你的问题，请参考以下文章