Break line using Flex keeping elements centered - html

Question

This is another CSS Flex question, I'm sorry but I've been struggling a lot using Flex, I'm trying to make a kind of slider, in which it will have a left and right arrow and elements in between, like so:
The problem I'm facing is that in certain number of elements I need to break a line, keeping the alignment center both vertically and horizontally, like this: (paint pro editing)
I can't find a way to do this, I'm lost.
This is my actual code for the first image:
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;
}
And this is a CodePen
How can I achieve this? thanks.

Answer 1

Put all your item-x elements within the same flex-con wrapper.
Then, simply add the following properties:
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>
Click Full page for better demonstration.