checkbox - 如何在调整页面大小时均匀间隔复选框

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>

Answer 1

抱歉，如果回答晚了，但也许这仍然可以帮助您。查看您在此处提供的 JFiddle 链接:Your JFiddle ，这不起作用的原因是因为您已将标签的高度设置为 14px 的固定高度(以使用您实现的复选框功能)。您正确设置了 justify-content: space-around 来执行您所描述的操作，但是如果内容始终为 14px，无论它跨越多少行，那么无论如何空间都将保持不变。由于您的复选框功能需要这个 14px 的高度，因此您应该将此复选框功能应用到嵌套在标签内的 div，并在该 div 之外但仍在标签内的附带文本。这是一个JFiddle使用我实现的代码来使它正常工作。

主要的 HTML 变化是这样的:

<label for="checkboxG4" class="radGroup1">
  <div class="css-label"></div>
  <span>News, Commentary, Research & Special Reports</span>
</label>

代替:

<label for="checkboxG4" class="css-label radGroup1">
  <p>News, Commentary, Research & Special Reports</p>
</label>

CSS 更改为:

input[type=checkbox].css-checkbox + label div.css-label,
input[type=checkbox].css-checkbox + label div.css-label.clr {}
label div.css-label {}

代替:

input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr {}
label.css-label {}