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

【问题标题】：CSS display: flex, align-center and button with checkboxesCSS 显示：flex、align-center 和带复选框的按钮
【发布时间】：2015-06-10 17:29:04
【问题描述】：

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

https://jsfiddle.net/elaman/4uyggo7s/

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

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

【问题讨论】：

我对您在这里要求的内容感到困惑。您能否添加一张图片来描述您希望实现的目标？
我找到了这个链接：lincolnloop.com/blog/smarter-input-groups-flexbox。基本上，如果我添加 .wrapper > * { display: inline-flex; } 它会给出我需要的结果。但我还是不确定，所以会做更多的测试。
什么是align-center？
@Oriol 对不起，align-items.

标签： html css flexbox

【解决方案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>

【讨论】：

这个确实有效，它与基线对齐，而不是中心。布局由 CMS 预定义。谢谢。