时间戳

首页 > 解决方案 > 为 Select 下拉菜单设置 Flex-basis 时不起作用

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

问题描述

有一个带有 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

标签： cssflexbox

解决方案

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

这意味着 inflex-direction: row它控制宽度，flex-direction: columnin 控制高度。

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

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

更多细节：

推荐阅读