Блог

Главная - Вопросы по программированию - CSS: Каковы правила поведения для контейнера «ширина: авто» с встроенным гибким интерфейсом?

CSS: Каковы правила поведения для контейнера «ширина: авто» с встроенным гибким интерфейсом?

#html #css #flexbox #width #display

Вопрос:

Я пытался создать представление списка / таблицы с динамической шириной с помощью flexbox и столкнулся с поведением, которое я не мог понять. Результат, которого я пытаюсь достичь, — это ширина, соответствующая содержимому списка в его самом широком месте.

 .main {
  width: auto;
  background: rgb(233, 148, 148);
  display: inline-flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  width: 100%;
}

.label,
.value {
  flex: 1;
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
} 
 <div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

Все сводится к тому, что ширина, по-видимому, определяется общим количеством символов, а не самой широкой точкой, как я ожидал. Вы можете отредактировать HTML и удалить N/A, например, и ширина уменьшится.

Когда я переключаюсь на display: inline-block с white-space: nowrap , ширина соответствует ожидаемой, но «столбцы» не выровнены.

 .main {
  width: auto;
  background: rgb(233, 148, 148);
  display: inline-block;
  white-space: nowrap;
}

.container {
  display: flex;
  width: 100%;
}

.label,
.value {
  flex: 1;
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
} 
 <div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

Что вызывает появление большой ширины при отображении inline-flex ? Есть ли способ добиться того поведения, которого я пытаюсь достичь? Я знаю , что это, вероятно, можно решить с display: grid помощью, но я ищу более простое решение.

Ответ №1:

Я знаю, что это, вероятно, можно решить с помощью display: grid, но я ищу более простое решение.

Это может быть сложно, если вы еще недостаточно хорошо разбираетесь в компоновке сетки, но это выглядит не так уж сложно, если вы используете сеточную систему 😉

Для ширины, посмотрите max-content .

простой пример:

 .main {
  width: max-content;
  background: rgb(233, 148, 148);
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.label,
.value {
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
} 
 <div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

В прошлом ,до flex amp; grid , display использовали бы табличную компоновку.

 .main {
      display:table;
      background: rgb(233, 148, 148);
    }
  .container {
    display: table-row;
  }
  .label, .value {
    padding: 4px;
    display:table-cell;
  }
  .label {
    text-align: end;
    border-right: 2px solid red;
  }
  .value {
    text-align: start;
  } 
 <div>
  <div class="main">
    <div class="container">
      <div class="label">Some Label</div>
      <div class="value">Some value</div>
    </div>
    <div class="container">
      <div class="label">Some label 2</div>
      <div class="value">Other val</div>
    </div>
    <div class="container">
      <div class="label">Third label</div>
      <div class="value">
        <div>N/A</div>
      </div>
    </div>
  </div>
</div>

Комментарии:

1. Да, я думаю, что сетка, вероятно, проще 🙂 Возможно, мне следовало уточнить, что я имею в виду «решение более низкого уровня», простое, а не с точки зрения сложности стиля. Я также пытаюсь понять источник странного поведения ширины, и если это возможно реализовать с помощью flexbox.

2. проблема в том, что вы пытаетесь использовать сеточную систему в строке, но также и в соответствующих столбцах:), поэтому сетка (или таблица) будет совпадать, в то время как flex будет выполнять одно или другое одновременно. @O. Aroesti

Метки: