我正在寻找使用 flexbox 制作的响应式设计。但是我有一些问题要在我的两种观点之间切换。也许有人知道如何解决这个问题。
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.box>* {
flex: 1 1 160px;
border: 1px solid blue;
margin: 5px;
padding: 50px;
}
.flex-item {
border: 1px solid blue;
margin: 5px;
padding: 50px;
}
<article class="box">
<p class="a">box a lorem ipsum ipsum </p>
<p class="b">box b lorem ipsum ipsum </p>
<p class="c">box c lorem ipsum ipsum </p>
</article>
最佳答案
您可以使用 CSS Grid与 Media Queries .请全屏查看输出并将其缩小到所需宽度以下,即 600 像素。我已经在评论中解释了代码。
输出:
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr; /* 2 columns of 2 fractions and 1 fraction each */
grid-template-rows: 1fr 1fr; /* 2 rows of a fraction each */
}
.box-a {
grid-area: 1 / 1 / 2 / 2; /* Start at Row 1, Start at Column 1. End at Row 2, End at Column 2 */
}
.box-b {
grid-area: 1 / 2 / 3 / 3;
}
.box-c {
grid-area: 2 / 1 / 2 / 2;
}
@media (max-width: 600px) { /* Target for screens below width of 600px */
.box-b {
grid-area: 1 / 2 / 2 / 3;
}
.box-c {
grid-area: 2 / 1 / 3 / 3;
}
}
/* Snippet Styling */
.box-a {
background: tomato;
}
.box-b {
background: lightgreen;
}
.box-c {
background: lightblue;
}
.grid-container>div {
text-align: center;
color: #fff;
font-size: 3em;
font-family: sans-serif;
padding: 10%;
}
<div class="grid-container">
<div class="box-a"> A </div>
<div class="box-b"> <img src="http://placehold.it/100"> </div>
<div class="box-c"> C </div>
</div>
关于html - 将 flexbox 与媒体查询 1 - 2 重组为 2 -1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58332768/