What settings I need to do in Flex container to have all child elements goes from left to right?
Now I have that last 2 elements stays on the side.
Please advise
Justify left.
@PeteSharp, I can’t, then space between disappears. I adjusted the card size in % for each screen size to have 30px between cards.
If I justify left and add 30px right margin to a card, so the last card in row also gonna have this 30px margin and its not gonna be pushing parent border 
Help please!
Like I said in a previous post, its a little more complex to achieve this, you need to add some CSS to the page header. Two ways to achieve it, one is less code - add 30px margin to left and right of the centre child item, or add 15px to left and right of child items depending on were they are.
This automates it, so you can add as many child items as you like without having to manage each one.
I have added border colours, so you can see how its working. You can remove those lines, and also replace .item with what ever your class is called.
<style>
.item:nth-child(3n-2) {
margin-right: 15px;
border: 1px solid blue;
}
.item:nth-child(3n-1) {
margin-left: 15px;
margin-right: 15px;
border: 1px solid red;
}
.item:nth-child(3n) {
margin-left: 15px;
border: 1px solid green;
}
</style>To do it so you are just adding margin left and right to the centre child, do this one.
<style>
.item:nth-child(3n-1) {
margin-left: 30px;
margin-right: 30px;
border: 1px solid blue;
}
</style>