没有行的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