Разорвать линию, используя Flex, сохраняя элементы в центре

Question

Это еще один вопрос CSS Flex, извините, но я много боролся с использованием Flex, я пытаюсь сделать своего рода слайдер, в котором он будет иметь левую и правую стрелку и элементы между ними. вот так:

Проблема, с которой я сталкиваюсь, заключается в том, что в определенном количестве элементов мне нужно разбить линию, сохраняя центр выравнивания как по вертикали, так и по горизонтали, например: (paint pro edit)

Я не могу найти способ сделать это, я потерян.

Это мой фактический код для первого изображения:

HMTL:

<div class="main allin">
  <div class="left-arrow">
    <i class="material-icons">keyboard_arrow_left</i>
  </div>

  <div class="flex-con ">
    <div class="item-1">
      <img src="https://via.placeholder.com/250" />
    </div>

    <div class="item-2">
      <img src="https://via.placeholder.com/250" />
    </div>

    <div class="item-3">
      <img src="https://via.placeholder.com/250" />
    </div>

  </div>
    <div class="right-arrow">
      <i class="material-icons">keyboard_arrow_right</i>
  </div>

  </div>

  <div class="main break">
  <div class="left-arrow">
    <i class="material-icons">keyboard_arrow_left</i>
  </div>

CSS:

.main{
  display:flex;
  justify-content: center;
   align-items: center;
}

.flex-con{
  display:flex;
  align-items: center;
}

.flex-con div{
  padding:20px;
}

А это CodePen

Как мне этого добиться? спасибо.

Answer 1

Поместите все свои элементы item-x в одну оболочку flex-con.
Затем просто добавьте следующие свойства:

flex-wrap: wrap; // to wrap its children into multiple lines
justify-content: center; // to center horizontally

.main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-con {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-con div {
  padding: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" />

<div class="main break">
  <div class="left-arrow">
    <i class="material-icons">keyboard_arrow_left</i>
  </div>
  <div class="flex-con ">
    <div class="item-1">
      <img src="https://via.placeholder.com/250" />
    </div>
    <div class="item-2">
      <img src="https://via.placeholder.com/250" />
    </div>
    <div class="item-3">
      <img src="https://via.placeholder.com/250" />
    </div>
    <div class="item-4">
      <img src="https://via.placeholder.com/250" />
    </div>
    <div class="item-5">
      <img src="https://via.placeholder.com/250" />
    </div>
  </div>
  <div class="right-arrow">
    <i class="material-icons">keyboard_arrow_right</i>
  </div>
</div>

Нажмите Полная страница для лучшей демонстрации.