CSS Flexbox-根据屏幕大小组织弹性项目 [英] CSS Flexbox - Organizing flex items based on screen size

问题描述

我有一个弹性项目容器，根据屏幕尺寸，我试图以不同的布局组织不同数量的弹性项目。例如，在台式机上，我希望有4个容器，每个容器以2x4网格排列2个项目，每个单元格为1x2。我似乎无法确定的是，仅使用flexbox获得平板电脑上的布局。

I have a container of flex items that I am trying to organize in different layouts with different number of flex items depending on screen size. For example, on desktop, I'd like to have 4 containers, each with 2 items laid out in a 2x4 grid and each cell is 1x2. What I can't seem to wrap my head around is the getting the layout on tablet using purely with flexbox. Any pointers in the right direction would be great.

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>

这是此处。

可以测试通过调整窗口大小来响应。通过删除第4个容器并更改flex-direction属性，我能够正确获取桌面和移动设备所需的布局。

Can test responsiveness by resizing window. I was able to correctly get the layouts that I want for desktop and mobile by removing the 4th container and changing flex-direction property. Struggling to do the same for tablet to allow spanning across multiple rows/columns in flex like you can in grid layouts.

台式机-容器：2x4 | |平板电脑也想这样做，以允许跨Flex跨行/跨栏，就像在网格布局中一样。

Desktop - container: 2x4 | cell: 1x2

|---------------------------------|
| --------------- --------------- |
| | Cell | Cell | | Cell | Cell | |
| --------------- --------------- |
| --------------- --------------- |
| | Cell | Cell | | Cell | Cell | |
| --------------- --------------- | 
|---------------------------------|

平板电脑-容器：2x3 |单元格：1x2 / 2x1

Tablet - container: 2x3 | cell: 1x2/2x1

|--------------------------|
| --------------- -------- |
| | Cell | Cell | | Cell | |
| --------------- |______| |
| --------------- |      | |
| | Cell | Cell | | Cell | |
| --------------- -------- |
|--------------------------|

移动-容器：3x2 |单元格：1x2

Mobile - container: 3x2 | cell: 1x2

|-----------------|
| --------------- |
| | Cell | Cell | |
| --------------- |
| --------------- |
| | Cell | Cell | |
| --------------- |
| --------------- |
| | Cell | Cell | | 
| --------------- |
|-----------------|

推荐答案

因为注释可以删除，并保留其值，我决定以此代码段为基础发布答案。

Since comments can be removed, and to keep their value, I decided to post an answer, with this code snippet as base.

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定位第二个

For it to work in tablet mode, you need to either make the container a flex column container, or use absolute or float to position the 2nd cell.

在响应速度方面，它们都有局限性，例如，柔性柱容器解决方案将需要固定高度。

They all have limitations when it comes to responsiveness, where i.e. the flex column container solution will need a fixed height.

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

The one I find most usable is to stay with the default flex row set up, and combine it with absolute position on the 2nd cell.

这种方式第一个和第三个单元格将继续是弹性项目，并从其响应能力中受益。

This way the 1st and 3rd cell will continue being flex items, and benefit from its responsiveness.

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

更新后的代码笔

堆栈代码段

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>

这篇关于CSS Flexbox-根据屏幕大小组织弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！