Flexbox 调整复选框的大小（太小）答案

【问题标题】：Flexbox resizes a checkbox (too small)Flexbox 调整复选框的大小（太小）
【发布时间】：2016-03-17 04:33:48
【问题描述】：

我有一个带有复选框的 HTML 公式列表。所有复选框都有一个标签。

我正在使用 flexbox 设置这个公式的样式。使用 flexbox 使其中一个复选框比其他所有复选框都小。原因似乎是该复选框的标签文本太长了，需要将其包裹在下一行中。

.filter-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.filter-list input[type=checkbox] {
    margin-right: 2rem;
    height: 20px;
    width: 20px;
}

<li>
    <input class="filterCheckbx" id="filter1" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter1">Hochschule</label>
</li>
<li>
    <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>
<li>
    <input class="filterCheckbx" id="filter3" type="checkbox" name="section" value="Bauen & Gestalten">
    <label for="filter3">Bauen & Gestalten</label>
</li>
<li>
    <input class="filterCheckbx" id="filter4" type="checkbox" name="section" value="BWL">
    <label for="filter4">BWL</label>
</li>
<li>
    <input class="filterCheckbx" id="filter5" type="checkbox" name="section" value="Informatik">
    <label for="filter5">Informatik</label>
</li>
<li>
    <input class="filterCheckbx" id="filter6" type="checkbox" name="section" value="Logistik">
    <label for="filter6">Logistik</label>
</li>

当然还有一个 Plunkr 演示：http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH?p=preview

这是一个使用 flexbox 的示例：

有人知道如何解决这个问题吗？

【问题讨论】：

标签： html css checkbox flexbox

【解决方案1】：

为输入添加：

flex: 1;

对于标签：

flex: 2;

它适用于我在 chrome、firefox、IE 上。

【讨论】：

我能够在label 上仅使用flex:1 实现我想要的布局
这将使大小比例为 1:2，而不是使复选框列大到足以容纳内容。

【解决方案2】：

这是因为 Webkit 中的一个错误，当它们作为 flex-child 放置时，它不应该影响复选框的大小。

Demo page

body{ font:14 Arial; }

label {
	display: inline-block;
	line-height: 1.2;
	margin-bottom: 2px;
	cursor: pointer;
}

label.checkbox {
	display: inline-flex;
}

label.checkbox > input {
	line-height: 2;
	margin: 4px 0 0 0;
	width: 35px; /* THE FIX */
}

<label class='checkbox'>
  <input type="checkbox" />
  This is a very verryyyyy long label for a checkbox item, try to click it!
</label>

【讨论】：

【解决方案3】：

如果您将 min-width 除了宽度之外添加到输入中，它似乎可以为我解决问题。

input[type=checkbox]{
    margin-right: 2rem;
    height: 20px;
    width: 20px;
    min-width: 20px;
}

【讨论】：

【解决方案4】：

我在 iOS Safari 13.1 上目睹了这个错误 - 正如 @vsync 所说，当使用 <input> 作为 flex child 时，这看起来像是一个 WebKit 错误。

我可以通过在复选框周围添加一个额外的包装器<div> 来解决这个问题。也就是说，而不是

<li>
    <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>

写作

<li>
    <div>
        <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    </div>
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>

在我的测试中，此解决方案正确地调整了左列的大小，使其仅与复选框所需的宽度一样宽。

【讨论】：

【解决方案5】：

您可以在不希望调整大小的项目上设置flex:none 作为弹性计算的一部分。

以下信息来自 Tailwind CSS 文档，但这也适用于纯 CSS：https://tailwindcss.com/docs/flex#none

考虑到它的初始大小，使用flex: 0 1 auto; 允许弹性项目缩小但不增长。

使用flex: 1 1 0%; 允许弹性项目根据需要增长和缩小，忽略其初始大小：

使用flex: 1 1 auto; 允许弹性项目扩大和缩小，同时考虑到它的初始大小：

使用flex: none; 防止弹性项目增长或缩小：

【讨论】：