有五个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都是彩色的，宽300像素，高500像素。
虽然您的问题已经得到回答，但被接受的解决方案不符合问题注释中提出的要求：
当屏幕的大小不足以并排显示div时，[I]希望div一个堆叠在另一个之上…[I]希望大小保持为[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演示。
参考文献：
- CSS：
displayflex-basisflex-directionflex-grow- CCD_ 10
- CCD_ 11
justify-content
- HTML:
<template>元素
- JavaScript：
document.querySelector()document.querySelectorAll()- CCD_ 16
Element.querySelectorAll()- CCD_ 18
EventTarget.dispatchEvent()- CCD_ 20
HTMLTemplateElement.content- CCD_ 22
NodeList.prototype.forEach()- 传播语法
window.getComputedStyle
您可以使用这个：
<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>最好不需要使用媒体查询来实现这一点。
您只需要在当前设置中添加一行即可：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>