当屏幕很小时，如何将 Div 堆叠在一起？

How can I Stack Divs above each other when the screen is small?

有五个 div。它们彼此相邻，但在移动设备上查看时会变得很奇怪。仅当屏幕尺寸不足以并排显示时，如何将这些 div 堆叠在一起？

#a,
#b,
#c,
#d,
#e {
  background-color: cyan;
  width: 300px;
  height: 500px;
  margin: 10px;
  border-radius: 5%;
}

#wee {
    display: flex;
}

<div id="wee">
  <div id="a">
    stuff
  </div>

  <div id="b">
    weeeeeee
  </div>

  <div id="c">
    i like turtles
  </div>

  <div id="d">
    i don't eat sunglasses.

  </div>

  <div id="e">
    cough cough
  </div>
</div>

div 都是彩色的，宽 300px，高 500px。

你可以使用这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0">


#a,
#b,
#c,
#d,
#e {
  background-color: cyan;
  width: 300px;
  height: 500px;
  margin: 10px;
  border-radius: 5%;
}

#wee {
  display: flex;
}

@media screen and (max-width: 900px) {
  #wee {
    flex-direction: column;
    margin: 10px;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="wee">
  <div id="a">
    stuff
  </div>

  <div id="b">
    weeeeeee
  </div>

  <div id="c">
    i like turtles
  </div>

  <div id="d">
    i don't eat sunglasses.

  </div>

  <div id="e">
    cough cough
  </div>
</div>

您最好不需要使用媒体查询来实现此目的。

您当前需要做的就是在 css 中添加 1 行：flex-wrap: wrap;

因此，您的完整代码如下所示：

#a,
#b,
#c,
#d,
#e {
  background-color: cyan;
  width: 300px;
  height: 500px;
  margin: 10px;
  border-radius: 5%;
}

#wee {
    display: flex;
    flex-wrap: wrap;
}

<div id="wee">
  <div id="a">
    stuff
  </div>

  <div id="b">
    weeeeeee
  </div>

  <div id="c">
    i like turtles
  </div>

  <div id="d">
    i don't eat sunglasses.

  </div>

  <div id="e">
    cough cough
  </div>
</div>

但是，通常不建议将 flex 用于多行设置，您应该只使用网格布局：

#a,
#b,
#c,
#d,
#e {
  background-color: cyan;
  height: 500px;
  border-radius: 5%;
}

#wee {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    grid-gap: 20px;
}

<div id="wee">
  <div id="a">
    stuff
  </div>

  <div id="b">
    weeeeeee
  </div>

  <div id="c">
    i like turtles
  </div>

  <div id="d">
    i don't eat sunglasses.

  </div>

  <div id="e">
    cough cough
  </div>
</div>

虽然您的问题已经得到解答，但被接受的解决方案未满足您问题评论中提出的要求：

when the size of the screen isn't enough to show the divs side by side, [I] want the divs to be stacked one on top of the other … [I] want the size to remain as [they area].

虽然该声明可能有些模棱两可，但我认为这意味着您需要元素 – #a、#b、#c、#d 和 #e – 宽度保持 300px，高度保持 500px。

因此，虽然您已经接受了这个答案，但我认为提供一个保留所需宽度和高度的替代方案可能是值得的：

// This JavaScript is used to show how the elements are sized and resized
// in the demo; this is not required in production but is merely to give
// information in the rendered demo page:
let wee = document.querySelector('#wee'),
  cards = wee.querySelectorAll('div[id]'),
  wGCS = window.getComputedStyle,
  fauxResize = new Event('resize');

window.addEventListener('resize', (e) => {
  let parentSizing = [wGCS(wee, null).height, wGCS(wee, null).width];
  cards.forEach(
    (div) => {
      let dimensions = [wGCS(div, null).height, wGCS(div, null).width, ...parentSizing];

      div.querySelectorAll('li').forEach(
        (li, i) => li.textContent = dimensions[i]
      )

    });
});
window.addEventListener('DOMContentLoaded', (e) => {
  cards.forEach(
    (div) => {
      let clone = document.querySelector('template').content.cloneNode(true);
      div.appendChild(clone);
    });
  window.dispatchEvent(fauxResize);
});

#a,
#b,
#c,
#d,
#e {
  background-color: cyan;
  /* while the default-value of flex-direction is 'row'
     it's worth stating it to ensure your layout is
     as you expect: */
  flex-direction: row;
  /* flex-grow and flex-shrink properties are both 0 so
     that the flex layout algorithm does not resize them: */
  flex-grow: 0;
  flex-shrink: 0;
  /* I've removed the 'width' declaration, and replaced it
     with flex-basis: */
  flex-basis: 300px;
  /* as the flex-direction is 'row' the flex-layout will
     take care of the width in that axis, but the cross-
     axis height should be stated: */
  height: 500px;
  border-radius: 5%;
}

#wee {
  display: flex;
  /* we use 'gap' here to set the 10px 'gutter' between
     adjacent elements: */
  gap: 10px;
  /* and padding to move the elements 10px from the
     borders of the parent: */
  padding: 10px;
}


/* when the width is less than 1550px, which is the minimum
   width required to show the elements with the gaps, widths
   and padding as set in the CSS, we enter the media-query: */
@media screen and (max-width: 1550px) {
  /* setting the flex-direction to column: */
  #wee {
    flex-direction: column;
  }
  #a,
  #b,
  #c,
  #d,
  #e {
    /* here we retain the 0 for both flex-grow and flex-
       shrink; but set 500px as the flex-basis because we wish to preserve
       the height of the elements, and set the width to 300px to preserve
       the width: */
    flex-basis: 500px;
    width: 300px;
  }
}


/* purely aesthetics and for information, to provide information */

*,
::before,
::after {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

ol,
li {
  list-style-type: none;
  color: #ffff;
}

ol {
  background-color: #0006;
}

li {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}

li[data-title]::before {
  content: attr(data-title);
  display: contents;
}

<!-- this <template> contains an element which displays information in the
     page when rendered, this is for demonstration purposes only, and not
     required in production code -->
<template>
  <ol>
      <li data-title="Height: "></li>
      <li data-title="Width: "></li>
      <li data-title="Parent height: "></li>
      <li data-title="Parent width: "></li>
    </ol>
</template>
<div id="wee">
  <div id="a">stuff</div>
  <div id="b">weeeeeee</div>
  <div id="c">i like turtles</div>
  <div id="d">i don't eat sunglasses.</div>
  <div id="e">cough cough</div>
</div>

JS Fiddle demo.

参考文献：