CSS 项目对齐

Question

当我的按钮宽度为 800 像素或更大时，这是我的目标：

当我的屏幕宽度为 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;
}

注意：我在我的 HTML 中删除了带有 .top 和 .bottom 类的那些 div，这使我可以让我的按钮与上面前两个图像显示的一样对齐。但随后我返回这些 div 以在第三张图片上显示结果。

Answer 1

您还可以为您的按钮设置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 2

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 3

像这样更改块类的css：

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