гибкие элементы в парах

Question

У меня есть flexbox с 4 внутренними элементами, содержащими изображения и текст. Flexbox можно обернуть: flex-wrap: wrap

на обычном экране ноутбука, элементы находятся в одной строке, например:

элемент item элемент item,

когда окно сокращается, последний изгибаемый элемент перемещается вниз в новой строке, например:

item item item
item

таким образом, у меня есть 3 элемента в первой строке и 1 в секунда.

Что мне нужно, так это чтобы строка разбивалась только парами. чтобы не было 3 в строке и 1 в новой строке, только все 4 в строке или 2/2 в строке.

Мне также нужно, чтобы элементы немного уменьшились, но я нашел Обходной путь для этого.

<div class = "flex">

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

    <div class = "f4">
        <a href = "...">
            <img ... width = "330" height = "247" >
            <h3>Title</h3>
        </a>
        <p>the excertp ... </p>
    </div>

</div>

.flex {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.f4 {
    flex-basis: 300px;
    flex-grow: 1;
    margin: 8px;
}
.f4 img {
    max-width: 330px;
    width: 100%;
    height: auto;
}

РЕДАКТИРОВАТЬ:

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

.f4 {
    flex-basis: 243.5px;
    flex-grow: 1;
    max-width: 330px;
    margin: 8px;
}
.f4 img {
    width: 100%;
    height: auto;
}
@media (max-width: 1038px) {
    .f4 {
        flex-basis: 330px;
    }
}

Answer 1

Надеюсь, что это удовлетворит ваш ответ

.flex {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.f {
    flex-basis: 50%;
    flex-grow: 1;
    display: flex;
}
.f4 {
    flex-basis: 50%;
    flex-grow: 1;
    margin: 8px;
}
.f4 img {
    max-width: 330px;
    width: 100%;
    height: auto;
}

<div class = "flex">

    <div class = "f">
        <div class = "f4">
            <a href = "...">
                <img ... width = "330" height = "247" >
                <h3>Title</h3>
            </a>
            <p>the excertp ... </p>
        </div>

        <div class = "f4">
            <a href = "...">
                <img ... width = "330" height = "247" >
                <h3>Title</h3>
            </a>
            <p>the excertp ... </p>
        </div>
    </div>

    <div class = "f">
        <div class = "f4">
            <a href = "...">
                <img ... width = "330" height = "247" >
                <h3>Title</h3>
            </a>
            <p>the excertp ... </p>
        </div>

        <div class = "f4">
            <a href = "...">
                <img ... width = "330" height = "247" >
                <h3>Title</h3>
            </a>
            <p>the excertp ... </p>
        </div>
    </div>

</div>

Answer 2

Нет способа автоматически решить эту проблему для всех случаев (кроме дополнительных упаковщиков для [1-2] и [3-4] ).

«Дополнительная оболочка» бесполезна для создания списков (например, если длина списка динамическая c - список страниц блога ).

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Самый простой c способ решить эту проблему с помощью средств массовой информации Q:

Ваш макет это: [25%] [25%] [25%] [25%] И на меньших экранах: 50% 50% - Вот почему медиа-запросы так полезны.

*{
  box-sizing: border-box;
}
.flex{
  display: flex;
  flex-wrap: wrap;
}
.col{
  border: 1px solid lightgray;
  flex-basis: 50%;
  height: 200px;
  /* align card  */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e1f7ff;
}

@media only screen and (min-width: 992px) {
  .col{
    flex-basis: 25%;
  }
}

<main class="flex">
  <div class="col">col 1</div>
  <div class="col">col 2</div>
  <div class="col">col 3</div>
  <div class="col">col 4</div>
</main>

Answer 3

Один простой трюк, который вы можете сделать, это сделать обертку вместе с этими 2 flex:

Поиграйтесь с скрипкой для большей ясности.

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

.Row {
  width: 700px;
  display: flex;
  justify-content: space-evenly;
}

.f4 {
  flex-basis: 300px;
  flex-grow: 1;
  margin: 8px;
}

.f4 img {
  max-width: 330px;
  width: 100%;
  height: auto;
}

<div class="flex">
  <div class="Row">
    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>

    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>
  </div>
  <div class="Row">
    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>

    <div class="f4">
      <a href="...">
        <img ... width="330" height="247">
        <h3>Title</h3>
      </a>
      <p>the excertp ... </p>
    </div>
  </div>




</div>

Answer 4

Пожалуйста, обратитесь по ссылке ниже. Также вы можете сделать одну вещь, использовать flex-basic:auto вместо фиксированной ширины и использовать медиа-запросы для устройств

https://yoksel.github.io/flex-cheatsheet/#align -self