Question

我使用的是flexbox，但我不知道这些项目是否有效。我想获得这个结果：

内容项是合理的，它们在内容空间结束时换行。像这样：

项目是包含标签和输入元素的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也伸展了，但我不知道为什么！

有人可以帮我达到我的目的吗？

更新

通过您的解决方案，现在我获得了这个：

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

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也拉伸，因为它们是块元素，默认情况下块元素总是有全宽，除非你声明它否则

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

Flex-box: Align last row to grid

我不知道为什么Flexbox项目会延伸

1 个答案: