Question

我正在尝试创建一个弹性框布局，其中包含两组按钮，第二组右对齐。我尝试使用弹性框布局

flx{display:-webkit-flex}
.flx:first-child{-webkit-flex:1;background-color:silver;}
.flx:nth-child(2){-webkit-flex:4;background-color:yellow;text-align:right}

如this fiddle所示，但它没有给出所需的结果。我怀疑我对flex如何工作的理解还有待改进。我非常感谢任何能够让我走上正轨的人，

Answer 1

flex布局很好。导致问题的是CSS选择器。 .flx:first-child定位的是class="flx"元素的第一个子元素，而不是我怀疑您想要的元素是class="flx"元素的第一个后代子元素。

更新到使用CSS descendent combinator的.flx div:first-child和.flx div:nth-child(2)将样式应用于class="flx"容器的子元素。见下面的例子：

.flx {
  display: -webkit-flex
}
.flx div:first-child {
  -webkit-flex: 1;
  background-color: silver;
}
.flx div:nth-child(2) {
  -webkit-flex: 4;
  background-color: yellow;
  text-align: right
}

<div class='flx'>
  <div>
    <button>One</button>
    <button>Two</button>
  </div>
  <div>
    <button>Three</button>
    <button>Four</button>
  </div>
</div>

右对齐第二个flex div内的控件

1 个答案: