没有行的 Flexbox 垂直网格/仪表板

Posted 2023-03-05

【中文标题】没有行的 Flexbox 垂直网格/仪表板

【英文标题】：Flexbox vertical grid / dashboard without rows

【发布时间】：2015-06-03 07:24:48

【问题描述】：

我目前正在尝试在 flexbox 中创建一个仪表板，其中 1 项大于其余项：

使用 flex-grow 或仅使用 witdths 创建网格并不难，但困难的部分似乎是两个较小的项目在较大的项目旁边垂直对齐，发生了什么：

这甚至可以通过 flexbox 实现吗？

'Added a simplified version of the code: http://codepen.io/Doordarius/pen/emXLXM/'

【参考方案1】：

您要么严重低估了使用 flexbox 的“高枕无忧”方面，要么您对单元有很多要求 - 例如使用列表、flexbox 项目中的 div、最小/最大尺寸要求。

基本上，使用相同大小的 flexbox 网格最简单的方法是： 1) 将您可以找到的每个填充/边距设置为 0。

padding:0;margin:0;

2) 以您想要的方式创建容器。 Flexbox 可以很好地处理其中的所有内容。

#activecontainer
  position:absolute;
  top: 51%; /* (+) offset by 1x AMOUNT*/
  left: 50%;
  transform: translate(-50%, -50%);
  display:inline-block;
  min-height:100% !important;

3) 开始将您的形状切割成不会增加空间的列和行。

.row, .coldisplay:flex;
.row
  flex-direction: row;
  background-color:black;

.col
  flex-direction:column;
  background-color:green;

4) 将最终项目设置为合理的边距。

.child
  display: flex;
  flex:1;
  margin: 1vmin; /* <--- AMOUNT*/
  width:auto;
  height: 100%;

... 5) 如果您需要重新定位网格，请返回并根据此边距大小设置偏移量。 从技术上讲，您应该为 col 和 row 输入一些非常复杂的第 n 个子节点，但是如果没有实际将边距偏移量作为 SASS 中的变量或类似的东西处理，并且您的示例不需要它，它会变得有点疯狂。

#dashboard >.row padding:1vmin 0; 
#dashboard>.col  padding:0 1vmin; 

那么，嘿，给你...

http://codepen.io/systemaddict/pen/zKxdZy