Гибкая чувствительная максимальная ширина с расстоянием между

Question

Я добавляю 3 столбца, максимальная ширина которых составляет 400 пикселей, и добавляю пробел между ними, используя space-between.

.wrap {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-between;
}

.item {
  width: 100%;
  max-width: 400px;
}

Когда я уменьшаю размер экрана, элементы не реагируют.Они просто рушатся друг под другом.Если я удаляю flex-wrap, я начинаю получать более 3 столбцов в строке, и они имеют размер менее 400 пикселей.

Как получить 3 отзывчивых столбца с пробелом в flex?

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

Answer 1

Вам следует удалить width: 100%, если вы не хотите, чтобы они занимали всю ширину родительского элемента. А так как вы используете flex для родителя, вы можете также использовать свойства flex для дочерних элементов и иметь следующие параметры:

.item {
  flex-basis: 33%;   /* <-- Added in lieu of the width */
  max-width: 400px;
  margin: 0px 5px;   /* <-- Added to give left/right margins */
}

Если у вас есть только 3 ребенка от родителей, вы также можете сделать это:

.item {
  flex-grow: 1;      /* <-- Lets them grow equally */
  flex-shrink: 1;    /* <-- Lets them shrink equally. OPTIONAL as 1 is the default */
  max-width: 400px;  
  margin: 0px 5px;   /* <-- Added to give left/right margins */
}

Сокращение для последнего:

.item {
  flex: 1;           /* <-- Lets them grow/shrink equally */
  max-width: 400px;  
  margin: 0px 5px;   /* <-- Added to give left/right margins */
}

Кроме того, если у вас есть только эти 3 дочерних элемента в родительском, вы можете удалить flex-wrap: wrap; из .wrapper, если вы не хотите, чтобы дочерние элементы переносились. В этом случае этого не произойдет, так как дочерние элементы имеют процентную ширину, которая составляет до 100%. Но это может сбить с толку, и это противоречит вашим намерениям.

Answer 2

Если вы хотите три столбца, измените свойство ширины на 33% в объявлении .item вместо 100%.

Пример JSFiddle

В настоящее времявсе ваши "столбцы" борются за 100% родительского узла.Вот отличное объяснение использования css flex от css-tricks.com.