CSS выравнивание предметов

Question

Это моя цель с кнопками, когда у меня ширина 800px или больше:

И это то, что я хочу иметь когда у меня ширина экрана от 400 до 799 пикселей:

Но моя проблема сейчас заключается в том, что я продолжаю иметь это на обоих размерах экрана:

Это мой HTML код:

<div class="container">
        <div class="block">
            <div class="top">
                <button class="red" onclick="changeColor('red')">r</button>
                <button class="yellow" onclick="changeColor('yellow')">y</button>
                <button class="blue" onclick="changeColor('rgb(0, 119, 255)')">b</button>
                <button class="green" onclick="changeColor('green')">g</button>
                <button class="purple" onclick="changeColor('purple')">p</button>
                <button class="orange" onclick="changeColor('orange')">o</button>
            </div>
            <div class="bottom">
                <button class="bluegreen" onclick="changeColor('rgb(32, 123, 131)')">bg</button>
                <button class="blueviolet" onclick="changeColor('blueviolet')">bv</button>
                <button class="yellowgreen" onclick="changeColor('yellowgreen')">yg</button>
                <button class="redviolet" onclick="changeColor('#c71585')">rv</button>
                <button class="redorange" onclick="changeColor('rgb(255, 102, 0)')">ro</button>
                <button class="yelloworange" onclick="changeColor('#ffae42')">yo</button>
            </div>
        </div>
    </div>

Это мой CSS код:

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
}

.block {
    display: block;
    position: absolute;
    bottom: 20px;
}

Примечание. Я удалил эти div с помощью классов .top и .bottom на моем HTML, что позволяет мне выровнять мои кнопки так, как показано на первых двух изображениях выше. Но затем я возвращаю эти div-ы, чтобы получить результат на третьем изображении.

Answer 1

Элементом flex должен быть .block DIV, с изменением flex-direction на column в медиа-запросе:

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20px;
  width: 100%;
}

button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fca;
  border:none;
}

@media (max-width: 799px) {
  .block {
    flex-direction: column;
  }
}

<div class="container">
  <div class="block">
    <div class="top">
      <button class="red" onclick="changeColor('red')">r</button>
      <button class="yellow" onclick="changeColor('yellow')">y</button>
      <button class="blue" onclick="changeColor('rgb(0, 119, 255)')">b</button>
      <button class="green" onclick="changeColor('green')">g</button>
      <button class="purple" onclick="changeColor('purple')">p</button>
      <button class="orange" onclick="changeColor('orange')">o</button>
    </div>
    <div class="bottom">
      <button class="bluegreen" onclick="changeColor('rgb(32, 123, 131)')">bg</button>
      <button class="blueviolet" onclick="changeColor('blueviolet')">bv</button>
      <button class="yellowgreen" onclick="changeColor('yellowgreen')">yg</button>
      <button class="redviolet" onclick="changeColor('#c71585')">rv</button>
      <button class="redorange" onclick="changeColor('rgb(255, 102, 0)')">ro</button>
      <button class="yelloworange" onclick="changeColor('#ffae42')">yo</button>
    </div>
  </div>
</div>

Answer 2

Вы также можете установить flex-basis для ваших кнопок для выравнивания, как вы указали:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
}

.block {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  bottom: 20px;
}

/* Fit all 12 buttons on 1 row on large desktop */
@media (min-width: 800px) {
  button {
    flex-basis: 8%;
  }
}

/* Fit 12 buttons on 2 rows with 6 buttons per row, on smaller desktop */
@media (max-width: 400px) and (max-width: 799px) {
  button {
    flex-basis: 16%;
  }
}

<div class="container">
  <div class="block">
    <button class="red" onclick="changeColor('red')">r</button>
    <button class="yellow" onclick="changeColor('yellow')">y</button>
    <button class="blue" onclick="changeColor('rgb(0, 119, 255)')">b</button>
    <button class="green" onclick="changeColor('green')">g</button>
    <button class="purple" onclick="changeColor('purple')">p</button>
    <button class="orange" onclick="changeColor('orange')">o</button>
    <button class="bluegreen" onclick="changeColor('rgb(32, 123, 131)')">bg</button>
    <button class="blueviolet" onclick="changeColor('blueviolet')">bv</button>
    <button class="yellowgreen" onclick="changeColor('yellowgreen')">yg</button>
    <button class="redviolet" onclick="changeColor('#c71585')">rv</button>
    <button class="redorange" onclick="changeColor('rgb(255, 102, 0)')">ro</button>
    <button class="yelloworange" onclick="changeColor('#ffae42')">yo</button>
  </div>
</div>

Answer 3

Изменение css класса блока следующим образом:

.block {
    display: flex;
    flex-wrap:wrap;
    position: absolute;
    bottom: 20px;
}