当屏幕宽度变得太小时如何使两个div堆叠在一起

如何解决当屏幕宽度变得太小时如何使两个div堆叠在一起

我下面的部分包含一个名为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%;
}

解决方法

这是因为您没有在弹性项目上设置宽度限制。您可以通过将window属性更改为断点来实现。您还可以使用媒体查询。

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%;
}