CSS显示：弹出，对齐中心和按钮与复选框 [英] CSS display: flex, align-center and button with checkboxes

问题描述

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

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

 < div class =wrapper> 
< div> 
<按钮>测试< /按钮> 
< / div> 
< div> 
< input type =checkboxid =test/> 
< label for =test>测试< / label> 
< / div> 
< div> 
<按钮>测试< /按钮> 
< / div> 
< div> 
<按钮>测试< /按钮> 
< / div> 
< / div> 
  

CSS

  .wrapper {
 display：flex; 
} 
 .wrapper> * {
 align-items：baseline; 
} 
 .wrapper> ：第一个孩子{
 flex：1 0 auto; 
} 
 .wrapper按钮{
 padding：10px; 
 
  

更新：将标签，复选框和按钮垂直对齐到单个基线。

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

所以你应该把它应用到 .wrapper 而不是 .wrapper> ; * ：

.wrapper {
align-items ：基线; / *对齐弹性项目的基线* /
}


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

 < div class =wrapper> < DIV> <按钮>试验< /按钮> < / DIV> < DIV> < input type =checkboxid =test/> < label for =test> Test< / label> < / DIV> < DIV> <按钮>试验< /按钮> < / DIV> < DIV> <按钮>试验< /按钮> < / div>< / div>  

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

.wrapper {display：flex; / *魔法开始* / align-items：baseline; / *对齐flex项目的基线* /}。wrapper> ：第一个孩子{margin-right：auto; / *将下面的flex项目推送到右边* /}。wrapper button {padding：10px;}

 < div class =wrapper> <按钮>试验< /按钮> < input type =checkboxid =test/> < label for =test> Test< / label> <按钮>试验< /按钮> <按钮>测试< /按钮>< / div>  

There is a flex box with buttons and a label inside. Apparently align-items property does not align buttons. How can I achieve that?

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

Update: I'm searching the way to vertically align label, checkbox and button to the single baseline.

解决方案

The align-items property applies to flex containers, not flex items.

So you should apply it to .wrapper instead of .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>

Moreover, I suggest simplifying the markup, removing unnecessary inner wrappers:

.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显示：弹出，对齐中心和按钮与复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！