社区首页 >问答首页 >flex-wrap没有包装在容器内

问flex-wrap没有包装在容器内
EN

Stack Overflow用户

提问于 2021-06-10 18:01:41

回答 3查看 45关注 0票数 1

我对css和html非常陌生，并且正在学习一门udemy课程，尽管我一直在遵循讲师的代码，但我的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: wrap-reverse时，彩色div框会移出#container。有什么帮助吗？

flexbox

html

css

回答 3

Stack Overflow用户

发布于 2021-06-10 18:07:26

您的#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;    
}

票数 0

Stack Overflow用户

发布于 2021-06-10 18:11:43

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

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>

票数 0

Stack Overflow用户

发布于 2021-06-10 18:11:50

有两种可能的解决方案：

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>