Question

我有一种动态形式的排序，我正在使用css flexbox进行布局。我正在使用flex，因为直到运行时我才知道组件在表单中的数量或类型/宽度。我希望第一个“列”具有左对齐标签，并且每个后续列都具有右对齐标签，但我无法想到任何方法来执行此操作。有什么建议？

此表单的基本示例（所有内容都对齐）。请务必向左拉动分隔线，使渲染的输出尽可能大，以便只使用一列来查看表单的外观：http://jsfiddle.net/27Gfd/

//basic markup for one form component (called a row). See JS fiddle for more
<div class="container">
        <div class="row"> //I might stack next to another "row" because I have fixed width based on component type
            <div class="miniflex"> //I'm another flex container to layout label/input
                <div class="label">Label 1</div>
                <div class="input">
                    <input type="text" />
                </div>
            </div>
        </div>

Answer 1

更改css：

    .ex3 .label{
        text-align: right;
        /* ... */
    }

为：

    .ex3 .label{
        text-align: left;
        /* ... */
    }

或者，如果您不确定第一列是标签，请使用：

    .miniflex div:first-child {
        text-align: left !important;
    }

（您应该避免使用!important，但如果不知道标记背后的逻辑，我就无法提供精确的替代方案。）

或者，如果您可能在第一列以外的地方使用标签

    .ex3 .label:first-child {
        text-align: left;
    }

Answer 2

目前没有，你不能

示例伪代码（只是一个想法，它不起作用！）

.flexContainer::first-flex-line > div   {}
.flexContainer::last-flex-line > div    {}
.flexContainer::nth-flex-line(odd)      {}
.flexContainer::nth-flex-line(3n+1)     {}

由于某个确切的原因，这还不存在

.flexContainer::nth-flex-line(3n+1) > div   {width:100%}

更改flex项的大小可能会影响容器的包装。这是一个循环循环。不是一件好事！：P

如果你能想到一个解决方案并希望它实现，你可以使用新闻组，甚至是chrome和firefox的bug跟踪器来询问CSSWG

在flexbox中每次换行后访问第一个元素的任何方法？

2 个答案: