flexbox 容器内的项目正在流出容器

Question

我正在创建一个投资组合页面，在该页面中我使用 flexbox 显示我的 6 个项目，连续 3 个项目。即使我使用了 flex-wrap，里面的项目也会从 flexbox 中流出。我对此比较陌生，所以我不知道发生了什么。

红色边框是我的 flexbox 容器，它包含六个 div 元素。在每个 div 元素中，有一个图像和另一个 div 元素，就像标题一样。每张图片的大小不同

HTML 代码：

<section id="work">
    <h1><u>These are some of my projects</u></h1>
    <div id="work-container">
        <div class="work-block">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
            <div id="project-title">Tribute Page</div>
        </div>
        <div class="work-block">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
            <div id="project-title">Random Quote Machine</div>
        </div>
        <div class="work-block">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
            <div id="project-title">JavaScript Calculator</div>
        </div>
        <div class="work-block">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
            <div id="project-title">Map Data Across the Globe</div>
        </div>
        <div class="work-block">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
            <div id="project-title">Wikipedia Viewer</div>
        </div>
        <div class="work-block">
            <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
            <div id="project-title">Tic Tac Toe Game</div>
        </div>
    </div>
    <button id="view-more"></button>
</section>

使用的 CSS：

#work-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    border: 5px solid red;

}

.work-block{
    width: 28%;
    margin: 20px;
}

@media (max-width: 1000px) {
    .work-block{
        width: 45%;
    }
}

#work-container img{
    height: calc(100% );
    width:100%;
    margin:0;
    padding: 0;
    object-fit: cover;
    flex:none;
} 

有一个特定的行可以为所有图像height: calc(100% ); 启用相同的高度。我不知道它是如何工作的，我是从互联网上获取的。它用于每个图像的高度相同。

此外，块之间的底部和顶部边距不起作用。

我需要一些帮助来正确包装容器内的内容并了解 height: calc(100% ); 的工作原理。

完整代码：https://codepen.io/tushar_432/pen/poyxmyZ

Answer 1

不要让图片height:100%，这会使图片占据所有空间，将文本推到外面，从而溢出。使用 flexbox 使其填充所有空间减去文本空间：

#work-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  border: 5px solid red;
}

.work-block {
  width: 28%;
  margin: 20px;
}

@media (max-width: 1000px) {
  .work-block {
    width: 45%;
  }
}
.work-block {
  display:flex; /* here */
  flex-direction:column; /* here */
}
.work-block img {
  width: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  flex: 1; /* here */
}

<section id="work">
  <h1><u>These are some of my projects</u></h1>
  <div id="work-container">
    <div class="work-block">
      <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
      <div id="project-title">Tribute Page</div>
    </div>
    <div class="work-block">
      <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
      <div id="project-title">Random Quote Machine</div>
    </div>
    <div class="work-block">
      <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
      <div id="project-title">JavaScript Calculator</div>
    </div>
    <div class="work-block">
      <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
      <div id="project-title">Map Data Across the Globe</div>
    </div>
    <div class="work-block">
      <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
      <div id="project-title">Wikipedia Viewer</div>
    </div>
    <div class="work-block">
      <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
      <div id="project-title">Tic Tac Toe Game</div>
    </div>
  </div>
</section>

Answer 2

你的标题溢出了，你可以添加

display: flex;
flex-direction: column;

致您的.work-block

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;700&family=Catamaran:wght@400;600&family=Raleway:ital@1&display=swap');

*,*::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    top:0;
}

body{
    background-color: bisque;
    font-family: 'Catamaran', sans-serif;
    text-align: center;
}

#header{
    position: sticky;
    top:0px;
    margin:0;
}
#navbar{
    color:white;
    width:100%;
    display: flex;
    background-color:#12343b;
    flex-direction: row;
    justify-content: flex-end;
    padding:18px;
    font-family: 'Catamaran', sans-serif;
    font-size: x-large;
    font-weight: 450;
    border-bottom: 2px solid white;
}

.nav-block:hover{
    color:#e1b382;
}
.nav-block{
    padding:0 20px;
}

#about h1{
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 700;
    font-size: 65px;
    color: #fefefe;
}

#about h3{
    font-size:24px;
    font-family: 'Raleway', sans-serif;
    color: #e1b382;
}

#about{
    text-align: center;
    padding:250px;
    background-color:#2d545e;
    color:white;
}

#work{
    padding:50px 0;
    background-color: #e1b382;

}

#work h1{
    font-weight: 600;
    font-size: 40px;
    color: #12343b;
    
}

#work-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    border: 5px solid red;

}

.work-block{
    width: 28%;
    margin: 20px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1000px) {
    .work-block{
        width: 45%;
    }
}

#work-container img{
    height: calc(100% );
    width:100%;
    margin:0;
    padding: 0;
    object-fit: cover;
    flex:none;
} 

#contact{
    padding:150px;
    background-color: #2d545e;
}

#contact-container{
    display: flex;
}

#footer{
    padding:40px;
    background-color:#2d545e;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> 
<header id="header">
        <nav id="navbar">
            <div class="nav-block">About</div>
            <div class="nav-block">Work</div>
            <div class="nav-block">Contact</div>
        </nav>
    </header>

    <section id="about">
        <h1>Hey I am Tushar</h1><br>
        <h3>a computers <br>and technology enthusiast</h3>
    </section>

    <section id="work">
        <h1><u>These are some of my projects</u></h1>
        <div id="work-container">
            <div class="work-block">
                <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="">
                <div id="project-title">Tribute Page</div>
            </div>
            <div class="work-block">
                <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png" alt="">
                <div id="project-title">Random Quote Machine</div>
            </div>
            <div class="work-block">
                <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png" alt="">
                <div id="project-title">JavaScript Calculator</div>
            </div>
            <div class="work-block">
                <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="">
                <div id="project-title">Map Data Across the Globe</div>
            </div>
            <div class="work-block">
                <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="">
                <div id="project-title">Wikipedia Viewer</div>
            </div>
            <div class="work-block">
                <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png" alt="">
                <div id="project-title">Tic Tac Toe Game</div>
            </div>
        </div>
        <button id="view-more"></button>
    </section>

    <section id="contact">
        <h1>Let's Work Together</h1>
        <p>How do you take your coffee?</p>
        <div id="contact-container">
            <div class="contact-block">
                <i class="fab fa-facebook"></i><span>Facebook</span>
            </div>
            <div class="contact-block">
                <i class="fab fa-github"></i><span>Github</span>
            </div>
            <div class="contact-block">
                <i class="fas fa-hashtag"></i><span>Twitter</span>
            </div>
            <div class="contact-block">
                <i class="fas fa-at"></i><span>Send a mail</span>
            </div>
            <div class="contact-block">
                <i class="fas fa-mobile-alt"></i><span>Call me</span>
            </div>
        </div>
    </section>

    <footer id="footer">
        <span>**This is just a fake portfolio. All the projects and contact details given are not real.</span>
        <span>© Created for freeCodeCamp </span>
    </footer>