我有一个媒体查询，用于对齐元素
600px 以上:
colL, colC, colR in one line,
and pck2 on the second line,
600 像素以下:
colL, colC in one line,
and colR on the second line,
and pck2 on the third line.
我通过设置 flex row 容器和 wrap 来调节它，并通过设置每个元素的宽度。 600px colR : 25vw，600px colR : 100vw 以下。
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
body {
width: 100%; }
.indexImg {
position: absolute;
top:0; left:0;
width : 100%;
}
.cont {
display: flex; /* container */
flex-direction: row;
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
justify-content: space-around; /* main axia : flex-start | flex-end | center | space-between | space-around | space-evenly; */
align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
align-content: space-around; /* all container lines : flex-start | flex-end | center | space-between | space-around | stretch; */
}
.colL, .colR, .colC, .pck2 {
display: flex; /* container */
flex-direction: column;
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around | space-evenly; */
align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
align-content: flex-start; /* all container lines : flex-start | flex-end | center | space-between | space-around | stretch; */
padding: 2vw;
}
.colL { background : yellow; }
.colR { background : blue; }
.colC { background : green; }
.pck2 { background : pink; }
@media only screen and (max-width: 499px) {
.cont, .colL, .colR, .colC, .pck2 { width : 100vw; }
/* colL { order : 3; } .colC { order : 1; } .colR { order : 2; } .pck2 { order : 4; } */
}
@media only screen and (max-width: 500px) and (min-width: 599px) {
.colC, .colL { width : 50vw; }
.cont, .colR, .pck2 { width : 100vw; }
/* .colL { order : 3; } .colC { order : 1; } .colR { order : 2; } .pck2 { order : 4; } */
}
@media only screen and (min-width: 600px) {
.colL, .colR { width : 25vw; }
.colC { width : 50vw; }
.cont, .pck2 { width : 100vw; }
}
</style>
</head>
<body>
<div class="cont" >
<div class="colL" >
<div class="f_g1 f_c3" >item 1</div>
<div class="f_g1 f_c3" >item 2</div>
</div>
<div class="colC" >
<div class="f_g1 f_c3" >img</div>
</div>
<div class="colR" >
<div class="f_g1 f_c3" >item 3</div>
<div class="f_g1 f_c3" >item 4</div>
</div>
<div class="pck2" >
<div class="f_g1 f_c3" >item 5</div>
<div class="f_g1 f_c3" >item 6</div>
</div>
</div>
</body>
</html>
最佳答案
您的媒体查询有点错误，因此在 500 和 600 像素之间存在差距。
@media only screen and (max-width: 500px) and (min-width: 599px) 应该是@media only screen and (min-width: 500px) and (max -宽度:599px)
您还可以删除 @media only screen and (max-width: 499px) query 以确保始终有回退，以防发生这种情况。
关于css3，flex，元素而不是换行到下一行，最小化并在单行中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46121332/