Creating a responsive layout with flexbox

Question

I have this div with some buttons in it:

I want to make it responsive, so at a certain screen size it has to look like this:

but at certain points, it looks like this:

or like this:

and I don't want that.

Most of the time I want it to look like in the first picture, and when the width of the viewport is less than 500px, it should look like in the second picture.

Here's the code:

#settings-content {
    width: 100%;
    min-height: 11rem;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    text-align: center;
    box-sizing: content-box;
}

.settings-title {
    display: inline-block;
    border: 1px solid black;
    border-radius: 1.5rem;
    height: 2.5rem;
    line-height: 2.1rem;
    width: 95%;
    text-align: center;
    margin: 1rem 0 2rem 0;
}

.settings-buttons, .languages-content {
    border: 1px solid black;
    width: 95%;
    text-align: center;
    margin: 0 auto;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
}

.settings-list {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding-left: 0;
    column-gap: 20px;
    justify-content: center;
}

.settings-item {
  border: 1px solid #000;
  flex: 1;
  max-width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-item::before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}

.languages-list {
    height: 9rem;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.languages-item {
    margin: 0 1rem;
}

@media (max-width: 500px)
{
    .settings-item {
        max-width: 100px;
        flex: 1 50%;
    }
}

<div id="settings-content">
            <div class="settings-buttons">
                <ul class="settings-list">
                    <li class="settings-item">Music</li>
                    <li class="settings-item">Sound</li>
                    <li class="settings-item">Info</li>
                    <li class="settings-item">Tutorials</li>
                </ul>
            </div>
</div>

How can I achieve the result that I want? I'm a beginner in Flexbox, I'd like an in-depth explanation of what is happening, please. :)

And why is my actual code not working? It works, but for some resolutions I get the 3rd and 4th layout and I don't want that.

Thanks :)

Answer 1

Remove flex: 1;, set item width in percents, then double it on small screens.

Alternative: You can put an extra element into your HTML with class that has flex-basis: 100%. Here is an article about wrapping in element with flex.

Modified code:

#settings-content {
    width: 100%;
    min-height: 11rem;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    text-align: center;
    box-sizing: content-box;
}

.settings-title {
    display: inline-block;
    border: 1px solid black;
    border-radius: 1.5rem;
    height: 2.5rem;
    line-height: 2.1rem;
    width: 95%;
    text-align: center;
    margin: 1rem 0 2rem 0;
}

.settings-buttons, .languages-content {
    border: 1px solid black;
    width: 95%;
    text-align: center;
    margin: 0 auto;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
}

.settings-list {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding-left: 0;
    column-gap: 20px;
    justify-content: center;
}

.settings-item {
  border: 1px solid #000;
  width: 20%;
  max-width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-item::before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}

.languages-list {
    height: 9rem;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.languages-item {
    margin: 0 1rem;
}

@media (max-width: 500px)
{
   .settings-item {
        width: 40%;
  }


}

<div id="settings-content">
            <div class="settings-buttons">
                <ul class="settings-list">
                    <li class="settings-item">Music</li>
                    <li class="settings-item">Sound</li>
                    <li class="settings-item">Info</li>
                    <li class="settings-item">Tutorials</li>
                </ul>
            </div>
</div>