Отзывчивый flexbox с 3 предметами в строке, затем 2, затем 1

Question

У меня есть раздел, содержащий шесть элементов.

Мне нужно 3 элемента в строке на рабочем столе, а на среднем устройстве - 2 элемента в строке и по 1 элементу на каждое мобильное устройство

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>  

Вот css:

.flex-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 768px) and (min-width: 320px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
    }
}

Это показывает мне только 3 элемента на рабочем столе и по одному на элемент в мобильном телефоне, но нет 2 элементов, что мне нужно изменить в моем коде, чтобы получить то, чтоЯ хочу?

Answer 1

Предыдущие ответы верны, пожалуйста, проверьте мой ответ в этом очень похожем сообщении SO: Как сделать child div жидким по отношению к родителю .

Также я отметил, что ваши СМИзапрос неверный, ваш класс неверный, редактируете его.

Answer 2

вы можете установить flex-basis в <div>, я надеюсь, что это может помочь вам https://codepen.io/paradian/pen/rZQopv

Answer 3

Макет может быть достигнут путем настройки flex-basis внутри медиа-запросов.

Вот идея:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex: 1 0 26%;
}

@media ( max-width: 768px) {
  .flex-container > div {
    flex-basis: 34%;
  }
}

@media ( max-width: 320px) {
  .flex-container > div {
    flex-basis: 51%;
  }
}

/* non-essential demo styles */
.flex-container > div {
  height: 50px;
  background-color: lightgreen;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

jsFiddle demo

В первом правиле flex flex-grow установлено на 1.Это означает, что гибкие элементы будут занимать все свободное пространство.

Следовательно, ширина каждого элемента, выраженная через flex-basis, больше не должна быть традиционной 33,33% (3 элемента в строке), 50% (2 на строку) и 100%.

Эти цифры часто приходится настраивать вручную (например, calc()), чтобы освободить место для полей.

В этом случае, благодаря технологии flex,flex-grow занимает оставшееся пространство, а flex-basis должен быть достаточно большим, чтобы обеспечить перенос.

Так, например, с flex-basis: 26% на линию могут поместиться только три элемента.Четвертый должен обернуть.Там достаточно места для наценки.flex-grow заполняет пустое место.

Answer 4

Вы хорошо справляетесь с медиазапросами. Остерегайтесь 'e' в .flex-conteiner должно быть .flex-container

Затем используйте медиазапросы и flex-based для остальной части экрана.размеры, например:

@media only screen and (max-width: 768px) and (min-width: 320px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 768px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 50%;
    }
}

и для больших экранов используйте гибкую основу 33%.