有一个带有按钮和标签的伸缩盒。显然,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;
}


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

最佳答案

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>

07-24 09:44
查看更多