当屏幕宽度变得太小时如何使两个 div 相互堆叠

Question

我有以下部分，其中包含一个名为 programDescriptionDiv 的 div。 programDescriptionDiv 中有两个单独的 div。默认情况下，两个 div 占据屏幕宽度的 50%。

当屏幕变得太小而无法在同一行容纳两个 div 时，我希望第二个 div 堆叠在第一个 div 下方（这是flex-wrap: wrap 应该做的，但没有做。

截至目前，当屏幕宽度变得太小时，两个 div 只是拉伸和收缩以继续填充屏幕宽度的 50%。我希望 div 堆叠在彼此之上。我的 CSS 有什么问题？

HTML：

<section class="programDescriptionSection">
  <div class="programDescriptionDiv">
    <div class="imageDiv">
      <img id="closingStemGapImage" src="../resources/closingStemGap.jpg" alt="">
    </div>
    <div class="paragraphDiv">
      <p class="homepageSectionParagraph">
        The Codigo Initiative aims to close the STEM opportunity divide in under-resourced Chicago-area school districts by connecting classroom
        teachers with tech-industry professionals. This pairing creates sustainable Computer Programming curriculums where volunteers support
        teachers as they learn the basics of Computer Programming.  Ultimately, the teachers will infuse their newly-found STEM skills into their
        existing classroom curriculums. The end-result is an enhanced classroom experience where teachers empower their students to compete in today's
        economy, and inspire them to create a better future for themselves and their communities.
      </p>
    </div>
  </div>
</section>

.programDescriptionSection {
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* align-items: center; center all contents vertically */
  justify-content: center;
  /*center horizontally*/
}

.programDescriptionDiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /*center all contents vertically*/
  justify-content: center;
  /*center horizontally*/
  width: 100%;
  /*make the section take up the whole width of the screen*/
  flex-direction: row;
}

.imageDiv {
  width: 50%;
  display: flex;
  align-items: center;
  /*center all contents vertically*/
  justify-content: center;
  /*center horizontally*/
  min-width: 50%;
}

#closingStemGapImage {
  /*Will fir the dimensions of the div dynamically.*/
  max-width: 100%;
  max-height: 100%;
}

.paragraphDiv {
  width: 50%;
  display: flex;
  align-items: center;
  /*center all contents vertically*/
  justify-content: center;
  /*center horizontally*/
}

.homepageSectionParagraph {
  font-size: 90%;
  width: 80%;
}

Answer 1

这是因为您没有对弹性项目设置宽度限制。您可以通过将min-width 属性更改为您的断点来执行此操作。您还可以使用媒体查询。

.programDescriptionSection {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* align-items: center; center all contents vertically */
    justify-content: center; /*center horizontally*/
}

.programDescriptionDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /*center all contents vertically*/
    justify-content: center; /*center horizontally*/
    width: 100%; /*make the section take up the whole width of the screen*/
    flex-direction: row;
}

.imageDiv{
    width: 50%;
    display: flex;
    align-items: center; /*center all contents vertically*/
    justify-content: center; /*center horizontally*/
    min-width: 500px; /*set to your breakpoint*/
}

#closingStemGapImage{
    /*Will fir the dimensions of the div dynamically.*/
    max-width: 100%;
    max-height: 100%;
}

.paragraphDiv{
    width: 50%;
    display: flex;
    align-items: center; /*center all contents vertically*/
    justify-content: center; /*center horizontally*/
}

.homepageSectionParagraph{
    font-size: 90%;
    width: 80%;
}

<section class="programDescriptionSection">
            <div class="programDescriptionDiv">
                <div class="imageDiv">
                    <img id="closingStemGapImage" src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" alt="">
                </div>
                <div class="paragraphDiv">
                    <p class="homepageSectionParagraph">
                        The Codigo Initiative aims to close the STEM opportunity divide in under-resourced Chicago-area school districts by connecting classroom
                        teachers with tech-industry professionals. This pairing creates sustainable Computer Programming curriculums where volunteers support
                        teachers as they learn the basics of Computer Programming.  Ultimately, the teachers will infuse their newly-found STEM skills into their
                        existing classroom curriculums. The end-result is an enhanced classroom experience where teachers empower their students to compete in today's
                        economy, and inspire them to create a better future for themselves and their communities.
                    </p>
                </div>   
            </div>
        </section>