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

Question

我目前正在尝试在 flexbox 中创建一个仪表板，其中 1 个元素比其余元素大:

使用 flex-grow 或仅使用 witdths 创建网格并不难，但困难的部分似乎是让 2 个较小的元素在较大的元素旁边垂直对齐，发生的情况是:

这甚至可以用 flexbox 实现吗？

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

Answer 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, .col{display: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