Flexbox на основе столбцов, который использует все горизонтальное пространство

Question

У меня есть набор флажков, которые создаются в алфавитном порядке как элементы flexbox в flexbox в направлении строки:

Несмотря на то, что я указал ширину и высоту здесь, они не являются фиксированными и будут менятьсяпри изменении размера окна браузера.

    <div style="width:500px; height:400px;">
    <div style="background-color:#99F; display: flex; flex-direction:row; flex-wrap:wrap;">
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text A</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text B</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text C</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text D</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text E</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text F</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:1 1 170px;"><input type="checkbox">Text G</div>

    </div>
    </div>

https://codepen.io/Stu42/pen/MWWvxYJ

Я настроил его так, чтобы он мог увеличиваться до трех столбцов или оставался одним илидва столбца, когда пространство ограничено:

min-width:170px; max-width:33%; flex:1 1 170px;

Я очень доволен этим отзывчивым поведением, но в идеале направление - column вместо row, чтобы поддерживать читаемость по алфавиту. Например: три столбца должны иметь вид:

    A D G
    B E
    C F

А не:

    A B C
    D E F
    G

Таким образом, вопрос в том, возможно ли (и если да, как) достичьтакое же поведение в направлении столбца, чтобы текст был в алфавитном порядке сверху вниз? Я обнаружил, что не могу сказать flexbox использовать все доступное горизонтальное пространство при указании направления column.

Примечание. Изменение способа генерации текста не тривиально, особенно потому, что вы можете 'не знаю, сколько у вас столбцов;тем не менее, для полноты, вот как:

    <div v-for="(item, index) in list_of_values" :key="index" ...

Answer 1

CSS-столбцы

Хотя его использование не без собственных проблем. В этом сценарии поле между столбцами выглядит не совсем контролируемым. Но это не так уж и плохо.

Спасибо за предложение 04FS.

Пример решения (где ширина 500px действительно является переменной):

<div style="background-color:#99F; width:500px; margin:0px; padding:0px">

<div class="col-container">
    <div class="col-item"><input type="checkbox">Text A</div>
    <div class="col-item"><input type="checkbox">Text B</div>
    <div class="col-item"><input type="checkbox">Text C</div>
    <div class="col-item"><input type="checkbox">Text D</div>
    <div class="col-item"><input type="checkbox">Text E</div>
    <div class="col-item"><input type="checkbox">Text F</div>
    <div class="col-item"><input type="checkbox">Text G</div>
 </div>

</div>

Поля в основном игнорируются:

.col-container {
  background-color:#9F9;

  -webkit-columns: 3 200px;
  -moz-columns: 3 200px;
  columns: 3 200px;

  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;

  -webkit-column-gap: 0em;
     -moz-column-gap: 0em;
          column-gap: 0em;

   margin: 0px;
  padding: 0px;
  display: inline-block;
}

.col-item {
  border: 1px solid #f00;
  width: 200px;
  margin: 0px;
  padding: 0px;

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

}

https://codepen.io/Stu42/pen/MWWvxYJ

Answer 2

Вы должны указать высоту контейнера, который содержит гибкий стиль (попробуйте указать высоту 400px) и установить flex-direction: column. Кроме того, элемент Flex изменится на flex: 0 170px, чтобы он не занимал всю высоту контейнера, если они не равны.

<div>
    <div style="background-color:#99F; display: flex; flex-direction:column; flex-wrap:wrap; height: 500px">
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:0 170px;"><input type="checkbox">Text A</div>
      <div style="border:1px solid #f00; min-width:170px; max-width:33%; flex:0 170px;"><input type="checkbox">Text B</div>

    </div>
 </div>