Question

有一个带有flex-direction：行的flex容器。而且这些单独的列中的每一个都是具有flex-direction的flex容器：column。

flex行中有一些表单输入，但是当我尝试为Location选择一个初始的flex-basis：250px时，它不起作用并且垂直应用。

但是，我找不到使它水平应用的方法。

    <div class="row">
        <div class="column input-container location">
              <label for="location">Location</label>
              <select name="location">
                <option *ngFor="let location of locations" [value]="location.locationId">
                  {{location.locationName}}
                </option>
              </select>
            </div>
        </div>

//样式

.row {
        display: flex;
        flex-direction: row;
        // flex-wrap: wrap;
    }
    .column {
        display: flex;
        flex-direction: column;
    }

    .location select {
    flex-basis: 250px;
}

这是在堆栈https://stackblitz.com/edit/angular-vr4cya

中运行的链接

Answer 1

flex-basis属性适用于弹性容器的主轴。

这意味着在flex-direction: row中控制宽度，在flex-direction: column中控制高度。

如果您位于flex-direction: column，需要设置弹性项目的宽度，请使用width属性。

.additional-assignment[_ngcontent-c0] .location[_ngcontent-c0] select[_ngcontent-c0] {
    /* flex-basis: 250px; */
    width: 250px; /* new */

更多详细信息：

将Flex-basis设置为Select下拉列表时不起作用

1 个答案: