如何均匀空间复选框，即使页面调整大小

Question

提前感谢您的帮助。

我需要确保包含复选框的DIVS与表单内的标签之间的垂直间距 - 即使页面调整大小。我遇到的问题是标签长度不同，所以当页面调整大小时，DIVS之间的间距是一致的，但我希望间距在一个标签的末尾之间是均匀的（可能最多3个）线长），以及下一个的开始。

我正在阅读关于flexbox的内容，并希望这是一个合适的方法来处理。但它没有像我预期的那样工作，也许是因为我做错了。或者也许是因为我使用复选框hack进行自定义复选框，这是干扰？

这是我的代码：

CSS：

/* CUSTOM CHECKBOX CONTROLS */
input[type=checkbox].css-checkbox {
position:absolute; 
z-index:-1000; 
left:-1000px; 
overflow: hidden; 
clip: rect(0 0 0 0); 
height:1px; 
width:1px; 
margin:-1px;
padding:0; 
border:0;
}

input[type=checkbox].css-checkbox + label.css-label,    input[type=checkbox].css-checkbox + label.css-label.clr {
padding-left:19px;  
height:14px; 
display:inline-block;
line-height:14px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:16px;
vertical-align:middle;
cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label,     input[type=checkbox].css-checkbox + label.css-label.chk {
background-position: 0 -14px;
}

label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_15092a7494cee0a8cdfe5f1e21e1e816.png);
-webkit-touch-callout: none; 212 247 8100
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* FLEXBOX CONTROLS */

.flex-container {
display:flex;
flex-direction:column;
height:450px;
align-items:baseline; 
}

.flex-item {
margin:auto;
margin-left:0px;
flex-basis:0;
flex-shrink:1;
height:auto;
min-height:50px;
}

HTML：

<div class="flex-container">

<div class="flex-item"><input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
<label for="checkboxG4" class="css-label radGroup1"><p>News, Commentary, Research & Special Reports</p></label>
</div>

<div class="flex-item"><input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" />
<label for="checkboxG5" class="css-label radGroup1"><p>Get General Research that includes periodic Special Reports sent when a landmark market event occurs.</p></label>
</div>

</div>