时间戳

首页 > 解决方案 > flex-wrap 没有包裹在容器内

html - flex-wrap 没有包裹在容器内

问题描述

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

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 之外。有什么帮助吗？

标签： htmlcssflexbox

解决方案

你的#containerdiv 有一个固定的高度，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;    
}

推荐阅读