html - CSS Flexbox - 根据屏幕尺寸组织 flex 元素

Question

我有一个 flex 元素的容器，我试图根据屏幕尺寸以不同的布局组织不同数量的 flex 元素。例如，在桌面上，我想要有 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 .

可以通过调整窗口大小来测试响应能力。通过删除第 4 个容器并更改 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 | | 
| --------------- |
|-----------------|

Answer 1

由于可以删除评论并保留其值(value)，因此我决定发布一个答案，以此代码段为基础。

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 设为 flex 列容器，或者使用 absolute 或 float 来定位第二个单元格。

它们在响应方面都有局限性，即 flex 列容器解决方案需要固定高度。

我发现最有用的方法是保留默认的 flex 行设置，并将其与第二个单元格的绝对位置结合起来。

这样一来，第一个和第三个单元格将继续作为 flex 元素，并从其响应能力中受益。

如果第二个单元格的内容使其高于第一个/第三个单元格，则可以允许它滚动，或者添加一个小脚本来调整其父级的高度。

Updated codepen

堆栈片段

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>