CSS Flex - Adjustment - Equal rows-CodePudding

i have a little problem finetuning my css menu. In a small range of screen size, the left side is pushed in 2 rows, but the right side remains in 1 row. How can i enforce that both sides have the same row count? So if not enough space is on the one side, the other side will also be wrapped in a second row, so it is equally distributed?

So it is always like this:

Link1 Link2 Link3   LOGO  Link5 Link6 Link7
        LongLink4         Link8

Link1 Link2 Link3   LOGO  Link6 Link7 Link8
      Link4 Link5         Link9 Link10

AND NOT

Link1 Link2 Link3  Link4  LOGO  Link6 Link7 Link8 Link9 Link10
               LongLink5

navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    padding-right: var(--gutter-x, 0.5em);
    padding-left: var(--gutter-x, 0.5em);
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px)
.container-fluid {
    padding-left: 32px;
    padding-right: 32px;
}
section, .container, .container-fluid {
    position: relative;
    word-wrap: break-word;
}
*, ::after, ::before {
    box-sizing: border-box;
}

CodePudding user response：

Give the right side a max-width and use flex-wrap could help