Flex-base не работает при настройке для выпадающего списка

Question

Есть гибкий контейнер с flex-direction: row.И каждый из этих отдельных столбцов снова является контейнерами flex со значением flex-direction: column.

Имеет несколько входов формы в строке flex, но когда я пытаюсь указать расположение, выберите начальную основу flex: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-based и width?
• Почему в CSS Flexbox отсутствуют свойства "justify-items" и "justify-self"?