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

Question

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

NA

我正在使用flexbox设计这个公式。使用flexbox使其中一个复选框比其他复选框小。原因似乎是，该复选框的标签文本太长，需要将其包装在下一行中。这是我的CSS（使用SCSS）：

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

A Picture描绘了千言万语（首先是flexbox，第二个没有）：

当然这是一个演示;）http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH?p=preview

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

干杯，大卫

Answer 1

添加输入：

flex: 1;

对于标签：

flex: 2; 

它适用于chrome，firefox，IE。

Answer 2

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

Demo page

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您在输入内容中添加了最小宽度（宽度），这似乎可以解决我的问题。

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

Answer 4

我在iOS Safari 13.1上见证了此错误–正如@vsync所说，当使用<input>作为flex子级时，这看起来像是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>

在我的测试中，此解决方案正确地将左侧列的大小调整为仅适合复选框所需的宽度。

Answer 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; 来防止弹性项目增长或缩小：