使用Flex保持元素居中的折线

Question

这是另一个CSS Flex问题，很抱歉，但是我一直在使用Flex苦苦挣扎，我正在尝试制作一种滑块，其中的滑块将具有左右箭头以及介于两者之间的元素，就像这样：

我面临的问题是，在某些数量的元素中，我需要折断一条线，同时保持垂直和水平方向的对齐中心，例如：（绘画专业编辑）

我找不到办法，我迷路了。

这是第一张图片的实际代码：

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>

  

点击整页以进行更好的演示。