CSS 显示：flex、align-center 和带有复选框的按钮

Question

里面有一个带有按钮和标签的弹性盒子。显然 align-items 属性没有对齐按钮。我怎样才能做到这一点？

<div class="wrapper">
    <div>
        <button>Test</button>
    </div>
    <div>
        <input type="checkbox" id="test" />
        <label for="test">Test</label>
    </div>
    <div>
        <button>Test</button>
    </div>
    <div>
        <button>Test</button>
    </div>
</div>

CSS

.wrapper {
    display: flex;
}
.wrapper > * {
    align-items: baseline;
}
.wrapper > :first-child {
    flex: 1 0 auto;
}
.wrapper button {
    padding: 10px;
}

更新：我正在寻找将标签、复选框和按钮垂直对齐到单个基线的方法。

Answer 1

align-items 属性适用于弹性容器，不适用于弹性项目。

所以你应该将它应用到 .wrapper 而不是 .wrapper > *:

.wrapper {
  align-items: baseline; /* Align the baselines of the flex items */
}

.wrapper {
  display: flex;
  align-items: baseline;
}
.wrapper > :first-child {
  flex: 1 0 auto;
}
.wrapper button {
  padding: 10px;
}

<div class="wrapper">
  <div>
    <button>Test</button>
  </div>
  <div>
    <input type="checkbox" id="test" />
    <label for="test">Test</label>
  </div>
  <div>
    <button>Test</button>
  </div>
  <div>
    <button>Test</button>
  </div>
</div>

此外，我建议简化标记，删除不必要的内部包装：

.wrapper {
  display: flex;         /* Magic begins */
  align-items: baseline; /* Align the baselines of the flex items */
}
.wrapper > :first-child {
  margin-right: auto;    /* Push following flex items to the right */
}
.wrapper button {
  padding: 10px;
}

<div class="wrapper">
  <button>Test</button>
  <input type="checkbox" id="test" />
  <label for="test">Test</label>
  <button>Test</button>
  <button>Test</button>
</div>

CSS 显示：flex、align-center 和带有复选框的按钮

CSS display: flex, align-center and button with checkboxes

html

css

flexbox