Растущие и сжимающиеся столбцы свойств Flexbox по сравнению со столбцами определенной ширины для адаптивной системы сеток

В последнее время я изучаю flexbox и как сделать свою собственную сетку. При создании системы сеток с использованием плавающих элементов мы определяем количество столбцов в макете и ширину каждого столбца в процентах. Но при использовании flexbox во всех учебниках по компоновке, которые я видел, просто используются flex-direction: row; и flex: 1 для столбцов, чтобы сделать их всех одинакового размера, с одинаковым отступом, по центру и в одну строку. Но когда я проверил исходный код flexboxgrid на github, они используют тот же принцип, что и bootstrap 3. У них есть столбцы для разных размеров экрана, 12 столбцов и flex-grow, shrink отключены. Вместо этого ширина каждого столбца определяется в процентах, например col-xs-1 max-width: 8.33%.

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


css flexbox responsive-design grid-system
person Limpuls    schedule 03.11.2016    source источник
comment
Есть проблема с вашим вопросом: все учебники по макетам, которые я видел, просто используют ... flex: 1 с justify-content: space between Если вы используете flex: 1, flex-элементы занимают все доступное пространство. В результате свойство justify-content не действует (нет места для применения space-between).   -  person Michael Benjamin    schedule 03.11.2016
comment
Кроме того, ваш вопрос, как правило, слишком широк для переполнения стека. stackoverflow.com/help/how-to-ask   -  person Michael Benjamin    schedule 03.11.2016
comment
Что мне делать тогда? Вопрос конкретен, почему кто-то использует одну технику вместо другой. Я редактирую исходный пост   -  person Limpuls    schedule 03.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

тл;др

Это не техники для достижения одного и того же результата, они делают разные вещи.

Flexbox grid использует flex-basis для определения width главной оси flex-контейнера. Он не использует flex: 1; для гибких элементов, потому что это эквивалентно flex: 1 1 0;. Это означает, что flex-basis будет иметь значение 0, а размеры гибких элементов будут пропорциональны указанному коэффициенту увеличения и уменьшения, оба имеют значение 1.

Пример

col-xs-1 с базисом гибкости 0, указанным из flex: 1;, будет расти, как если бы он был col-xs-12, если он единственный дочерний элемент, если есть еще один такой же col-xs-1 в качестве родственного элемента, тогда он будет расти, как если бы он был col-xs-6 и так далее.

Ожидается, что каждый col-xs-1 заполнит 1/12, (8,33333333%) контейнера, чего нельзя было бы сделать при использовании flex: 1;.

* {
  box-sizing: border-box;
}
article {
  margin-bottom: 1rem;
}
[class^="col-"],
[class*="col-"] {
  flex: 0 0 auto; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto; */
}
.row {
  display: flex;
  margin-right: -.5rem;
  margin-left: -.5rem;
}
.col-xs-1 {
  padding-right: .5rem;
  padding-left: .5rem;
  flex-basis: 8.33333333%;
}
.box-row {
  min-height: 1em;
  background: #007FFF;
}
article:last-of-type .col-xs-1 {
  flex: 1;  /* Same as flex: 1 1 0; */
}
<article class="row">
  <section class="col-xs-1">
    <div class="box-row"></div>
  </section>
  <section class="col-xs-1">
    <div class="box-row"></div>
  </section>
</article>

<article class="row">
  <section class="col-xs-1">
    <div class="box-row"></div>
  </section>
  <section class="col-xs-1">
    <div class="box-row"></div>
  </section>
</article>

person Ricky    schedule 03.11.2016