flex-wrap 不包裹在容器内答案

【问题标题】：flex-wrap isn't wrapping inside the containerflex-wrap 不包裹在容器内
【发布时间】：2021-08-27 18:25:57
【问题描述】：

对 css 和 html 非常陌生，并且正在学习 udemy 课程，尽管我已经按照讲师的代码进行了 T 恤，但我的 flex-wrap 只是' t 包裹在容器内。到目前为止，这是我所拥有的：

body {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  text-align: center;
}

#container {
  background-color: #003049;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#container div {
  width: 600px;
  height: 200px;
  text-align: center;
}

<h1>Let's Play With Flexbox</h1>

<section id="container">
  <div style="background-color: #80ffdb"></div>
  <div style="background-color: #64dfdf"></div>
  <div style="background-color: #48bfe3"></div>
  <div style="background-color: #5390d9"></div>
  <div style="background-color: #6930c3"></div>
</section>

当我将它设置为 flex-wrap: nowrap;它似乎很好，并且保持在#container 内。但是当我把它改成 flex-wrap: wrap;或 flex-wrap: 换行；彩色 div 框在#container 之外。有什么帮助吗？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您的#container div 有一个固定的高度500px，浏览器会尊重它并且不会破坏它。将其设置为height: 100% 将允许容器根据需要更改高度。

#container {
    background-color: #003049;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;    
}

【讨论】：

您好！谢谢你的回答。我认为 flex-boxes 的全部目的是使里面的内容“灵活”，并根据放入的容器进行自我调整。当讲师在 udemy 上运行他的代码时，容器内的内容变小了，而不是增加了容器本身的大小。但是看到其他答案，这似乎就是我的问题的答案。

【解决方案2】：

不要设置高度。让浏览器为你呈现。

body {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  text-align: center;
}

#container {
  background-color: #003049;
  width: 90%;
  margin: 0 auto;
  border: 5px solid #003049;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#container div {
  width: 600px;
  height: 200px;
  text-align: center;
}

<h1>Let's Play With Flexbox</h1>

<section id="container">
  <div style="background-color: #80ffdb"></div>
  <div style="background-color: #64dfdf"></div>
  <div style="background-color: #48bfe3"></div>
  <div style="background-color: #5390d9"></div>
  <div style="background-color: #6930c3"></div>
</section>

【讨论】：

嗨！感谢您的回答。有没有办法让#container 中的内容不改变#container 本身的大小？
@YoonCho 你说的“里面有内容......而不改变大小”是什么意思？
所以我相信这部分在我的 udemy 课程中的教训是让#container 成为一个设定的高度，并且通过使用 flex-wrap，#container 中的内容会自行调整以能够适合里面。讲师将他的#container 设置为 500 像素的高度，并且容器内的 div 似乎更改了它们的尺寸以适应内部
@YoonCho 如果您将高度设置为500px，它会正确包裹。如果不是，他们将在同一行。我不确定你想要的结果是什么。截图会很有帮助。
再次感谢，我已经用截图编辑了我的原始帖子，虽然它们看起来有点乱。第一张图片是我打开 html 文件时的结果。第二个是css代码的截图。第三张是我的导师对他的 html 文件的结果的截图。第四是他的css代码截图。再次感谢！

【解决方案3】：

有两种可能的解决方案：

1.) 将overflow-y: auto; 添加到 flex-container 以允许其内容在其内部滚动，同时保持其固定高度：

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    text-align: center;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    overflow-y: auto;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;    
}

#container div{
    width: 600px;
    height: 200px;
    text-align:center;
}

<h1>Let's Play With Flexbox</h1>

<section id="container">
    <div style="background-color: #80ffdb"></div>
    <div style="background-color: #64dfdf"></div>
    <div style="background-color: #48bfe3"></div>
    <div style="background-color: #5390d9"></div>
    <div style="background-color: #6930c3"></div>
</section>

2.) 或者，作为第二种解决方案，只需删除 flex 容器的 heigth 设置，这会将其高度设置为 auto ，允许它根据需要增长：

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    text-align: center;
}

#container {
    background-color: #003049;
    width: 90%;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;    
}

#container div{
    width: 600px;
    height: 200px;
    text-align:center;
}

<h1>Let's Play With Flexbox</h1>

<section id="container">
    <div style="background-color: #80ffdb"></div>
    <div style="background-color: #64dfdf"></div>
    <div style="background-color: #48bfe3"></div>
    <div style="background-color: #5390d9"></div>
    <div style="background-color: #6930c3"></div>
</section>

【讨论】：