为 Select 下拉菜单设置 Flex-basis 时不起作用答案

【问题标题】：Flex-basis not working when setting it for a Select dropdown为 Select 下拉菜单设置 Flex-basis 时不起作用
【发布时间】：2018-10-08 04:46:15
【问题描述】：

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

在 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;
}

这是在 stackbliz 中运行的链接，https://stackblitz.com/edit/angular-vr4cya

【问题讨论】：

标签： css flexbox

【解决方案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 */

更多细节：

【讨论】：