文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在2x2中做一个特殊的挠曲

问如何在2x2中做一个特殊的挠曲
EN

Stack Overflow用户

提问于 2019-10-17 14:26:33

回答 1查看 62关注 0票数 0

我试着做一个“特别的”反应灵活的挠曲。

我有这个演示；

https://codepen.io/josemb94/pen/eYYdZea

在正常工作模式下工作正常(1)；

-----------------
-  bla  -  ble  -
-  bla  -  ble  -
-  bla  -       -
-  bla  -       -
-----------------
-  two  - three -
-----------------

或者可以是(和工作正常) (2)；

-----------------
-  bla  -  ble  -
-       -  ble  -
-       -  ble  -
-       -  ble  -
-----------------
-  two  - three -
-----------------

在响应模式(1)中，希望按列弯曲并删除空空间

---------
-  bla  -
-  bla  -
-  bla  -
-  bla  -
---------
---------
-  two  -
---------
---------
- blee  -
- blee  -
---------
---------
- three -
---------

响应模式(2)希望按列弯曲并删除空空间

---------
-  bla  -
-  bla  -
---------
---------
-  two  -
---------
---------
- blee  -
- blee  -
- blee  -
- blee  -
---------
---------
- thee  -
---------

“二”和“三”只包含一行。所以同样的高度。

但是"bla“和"ble”可能是不同的高度。

在正常模式下，我希望“2”和“3”对齐。

在响应模式下，我希望"bla“、”2“、"ble”、“3”对齐，而不需要空空间。

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-17 15:31:25

我不太清楚你需要什么，但我想你可能是在找这个：

更新

HTML

<div class="grid2x2">
  <div class="box box1">bla<br/>bla<br/>bla<br/>bla</div>
   <div class="box box3">two</div>
  <div class="box box2">ble<br/>ble</div>
  <div class="box box4">three</div>
</div>

样式

html, body {
  min-height: 100px;
  margin: 0;
}
.grid2x2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 40px);  
  justify-content: center;
  flex-direction: row;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.box { margin: 1px; }
.box1 { background-color: red; order: 1; }
.box2 { background-color: orange; order: 2; }
.box3 { background-color: purple; order: 3; }
.box4 { background-color: grey; order: 4; }

@media (max-width: 800px) { /* Use your own breakpoint here, doesn't have to be 800 */
  .grid2x2,
  .grid2x2 > div {
    display: block;
  }
}

将其粘贴到样式表中，尝试将窗口调整到800 to以下，以获得结果。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58434948

复制

相似问题

问如何在2x2中做一个特殊的挠曲
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在2x2中做一个特殊的挠曲EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在2x2中做一个特殊的挠曲
EN