Settings for flexbox in Views

Problem/Motivation

The simple settings of the flexbox format in views were publishing each "card" in full page width.
So, I was not getting a display of cards in a row on a big screen.
However, the result on a small screen was as expected.

Steps to reproduce

Create Views
Format: flexbox
Settings: cardlayout; direction: row; justify content: start; align items: stretch.

In theme stylesheet:
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.image {
display:block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.title {
font-size: 1.5em;
color: #333333;
}
.description-fleur, .benefices-fleur {
font-size:1.1em;
}

Proposed resolution

In Views:
1-Maintain Views format + settings.

2-Go to Advanced setting => CSS class, add the class for the flex container:
container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}

In theme stylesheet, make sure to add the width accordingly. The trick for me was on the description: width: 325px;

Remaining tasks

User interface changes

Maybe a feature to help center images?

API changes

Data model changes