html - 我不知道为什么 Flexbox 元素会拉伸(stretch)

Question

我正在使用 flexbox，但我不知道元素会拉伸(stretch)。我想获得这样的结果:

内容项是对齐的，当内容的空间结束时它们会换行。像这样:

元素是包含标签和输入元素的 DIV。所以我希望整个潜水包裹和标签不被输入分开。

这里是 HTML:

<tr class="form_boxes">
    <td colspan="3">
        <div class="">
            <span class="">NPA</span>
            <input type="text" ng-model="np.npa" maxlength="5" class="char_5" />
        </div>
        <div class="">
            <span>NXX</span>
            <input type="text" ng-model="np.nxx" />
        </div>
        <div class="">
            <span>ISO</span>
            <input type="text" ng-model="np.iso" maxlength="5" class="char_5" />
        </div>
        <div class="">
            <span>Descrizione</span>
            <input type="text" ng-model="np.descrizione" />
        </div>
        <div class="">
            <span>Location</span>
            <input type="text" ng-model="np.location" />
        </div>
        <div class="">
            <span>Root</span>
            <input type="text" ng-model="np.root" />
        </div>
        <div class="">
            <span>Billing ID</span>
            <input type="text" ng-model="np.billingId" />
        </div>
        <div class="">
            <span class="no-wrap">Ultimo aggiornamento: {{ np.ultimoUpdate }}</span>
        </div>
    </td>
</tr>

这里是 CSS:

#internal_content .form_boxes { 
    width:500px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    align-content: flex-start;

    }

#internal_content .form_boxes td {
    width: 100%;
}

我也想去掉TR的固定大小...这是我得到的结果:

如您所见，TR 尺寸还可以……TD 尺寸也不错(请相信我)。问题是 DIV 也会拉伸(stretch)，但我不知道为什么!

有人可以帮助我实现我的目标吗？

更新

有了你的解决方案，现在我得到了这个:

最后一行也是合理的...它应该像我发布的第一张图片一样..我是否必须创建一个新的父 flexbox ？

Answer 1

你在 div 的父级上使用你的 flexbox 所以 td，你的类应该在 td 元素上所以 div 会受到影响

#internal_content .form_boxes td { 
    width:500px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    align-content: flex-start;
}

并删除应该做的宽度

还有 div 拉伸(stretch)，因为它们是 block 元素，默认情况下 block 元素始终具有全宽，除非您另外声明

这也是问题解决方案的一部分

Flex-box: Align last row to grid