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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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 :)

CodePudding user response：

Remove flex: 1;, set item width in percents, then double it on small screens. Use the following selector to wrap:

.settings-item:nth-child(2n) {
    flex-basis: 100%;
}

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%;
  }
   .settings-item:nth-child(2n) {
        flex-basis: 100%;
   }

}

<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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

remove max-width: 100px; from settings-item in 500px media