我有一个弹性项目容器，我试图根据屏幕尺寸以不同的布局组织不同数量的弹性项目。例如，在桌面上，我想要有 4 个容器，每个容器有 2 个项目，布局在 2x4 网格中，每个单元格为 1x2。我似乎无法理解的是纯粹使用 Flexbox 在平板电脑上获取布局。任何指向正确方向的指针都会很棒。
div {
box-sizing: border-box;
width: 100%;
}
.container {
display: flex;
border: 1px solid red;
flex-wrap: wrap;
flex-direction: row;
padding: 10px;
}
.cell {
display: flex;
flex: 50%;
padding: 10px;
border: 1px solid blue;
height: 100px;
}
.data {
width: 100%;
justify-content: middle;
flex: 1;
border: 1px solid green;
}
@media only screen and (max-width: 1024px) {
.container {
display: inline-block;
position: relative;
}
#cell1 {
width: 66%;
float: left;
}
#cell2 {
flex-direction: column;
right: 10px;
position: absolute;
width: 33%;
height: 100%;
}
#cell3 {
width: 66%;
float: left;
}
#cell4 { display: none;}
}
@media only screen and (max-width: 640px) {
#cell2 {
flex-direction: row;
position: static;
height: 100px;
}
#cell4 { display: none; }
.container {
flex-direction: row;
flex-wrap: wrap;
display: flex;
}
.cell {
flex: 100%;
}
}
<div class="container">
<div class="cell" id="cell1">
<span class="data">Image1</span>
<span class="data">Info1</span>
</div>
<div class="cell" id="cell2">
<span class="data">Image2</span>
<span class="data">Info2</span>
</div>
<div class="cell" id="cell3">
<span class="data">Image3</span>
<span class="data">Info3</span>
</div>
<div class="cell" id="cell4">
<span class="data">Image4</span>
<span class="data">Info4</span>
</div>
</div>
这是一个代码笔here https://codepen.io/phannypak60/pen/XzRaZV.
可以通过调整窗口大小来测试响应能力。通过删除第四个容器并更改 flex-direction 属性，我能够正确获得桌面和移动设备所需的布局。努力为平板电脑做同样的事情，以允许在 Flex 中跨越多个行/列，就像在网格布局中一样。
桌面 - 容器：2x4 |细胞：1x2
|---------------------------------|
| --------------- --------------- |
| | Cell | Cell | | Cell | Cell | |
| --------------- --------------- |
| --------------- --------------- |
| | Cell | Cell | | Cell | Cell | |
| --------------- --------------- |
|---------------------------------|
平板电脑 - 容器：2x3 |细胞：1x2/2x1
|--------------------------|
| --------------- -------- |
| | Cell | Cell | | Cell | |
| --------------- |______| |
| --------------- | | |
| | Cell | Cell | | Cell | |
| --------------- -------- |
|--------------------------|
移动 - 容器：3x2 |细胞：1x2
|-----------------|
| --------------- |
| | Cell | Cell | |
| --------------- |
| --------------- |
| | Cell | Cell | |
| --------------- |
| --------------- |
| | Cell | Cell | |
| --------------- |
|-----------------|
由于评论可以被删除，并保持其价值，我决定发布一个答案，以此代码片段为基础。
div {
box-sizing: border-box;
width: 100%;
}
.container {
display: flex;
border: 1px solid red;
flex-wrap: wrap;
flex-direction: row;
padding: 10px;
}
.cell {
display: flex;
flex: 50%;
padding: 10px;
border: 1px solid blue;
height: 100px;
}
.data {
width: 100%;
justify-content: middle;
flex: 1;
border: 1px solid green;
}
@media only screen and (max-width: 1024px) {
.container {
display: inline-block;
position: relative;
}
#cell1 {
width: 66%;
float: left;
}
#cell2 {
flex-direction: column;
right: 10px;
position: absolute;
width: 33%;
height: 100%;
}
#cell3 {
width: 66%;
float: left;
}
#cell4 { display: none;}
}
@media only screen and (max-width: 640px) {
#cell2 {
flex-direction: row;
position: static;
height: 100px;
}
#cell4 { display: none; }
.container {
flex-direction: row;
flex-wrap: wrap;
display: flex;
}
.cell {
flex: 100%;
}
}
<div class="container">
<div class="cell" id="cell1">
<span class="data">Image1</span>
<span class="data">Info1</span>
</div>
<div class="cell" id="cell2">
<span class="data">Image2</span>
<span class="data">Info2</span>
</div>
<div class="cell" id="cell3">
<span class="data">Image3</span>
<span class="data">Info3</span>
</div>
<div class="cell" id="cell4">
<span class="data">Image4</span>
<span class="data">Info4</span>
</div>
</div>
要使其在平板电脑模式下工作，您需要将container弹性列容器，或使用绝对或浮动来定位第二个单元格。
它们在响应能力方面都有局限性，即柔性柱容器解决方案需要固定的高度。
我发现最有用的一个是保留默认的弹性行设置，并将其与第二个单元格上的绝对位置结合起来。
这样，第一个和第三个单元将继续是弹性项目，并受益于其响应能力。
如果第二个单元格的内容使其高于第一个/第三个单元格，则可以允许它滚动，或者添加一个小脚本来调整其父级的高度。
更新了代码笔 https://codepen.io/anon/pen/gXWJaa
堆栈片段
div {
box-sizing: border-box;
width: 100%;
}
.container {
display: flex;
border: 1px solid red;
flex-wrap: wrap;
flex-direction: row;
padding: 10px;
}
.cell {
display: flex;
flex: 50%;
padding: 10px;
border: 1px solid blue;
height: 100px;
}
.data {
width: 100%;
justify-content: middle;
flex: 1;
border: 1px solid green;
}
@media only screen and (max-width: 640px) {
#cell2 {
flex-direction: row;
position: static;
height: 100px;
}
#cell4 { display: none; }
.container {
flex-direction: row;
flex-wrap: wrap;
display: flex;
}
.cell {
flex: 100%;
}
}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
.container {
position: relative;
}
#cell1 {
flex: 0 0 66%;
}
#cell2 {
flex-direction: column;
right: 10px;
position: absolute;
width: 33%;
height: calc(100% - 20px);
}
#cell3 {
flex: 0 0 66%;
}
#cell4 { display: none;}
}
<div class="container">
<div class="cell" id="cell1">
<span class="data">Image1</span>
<span class="data">Info1</span>
</div>
<div class="cell" id="cell2">
<span class="data">Image2</span>
<span class="data">Info2</span>
</div>
<div class="cell" id="cell3">
<span class="data">Image3</span>
<span class="data">Info3</span>
</div>
<div class="cell" id="cell4">
<span class="data">Image4</span>
<span class="data">Info4</span>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
