将元素定位在父元素的右上角并确保环绕它

Question

我想使用展开/折叠按钮为任意数量的元素创建容器。按钮应位于容器的右上角，容器内的元素应环绕按钮。这是个主意：

我快速Codepen prototype了这个元素，但我唯一可以将按钮放在右上角的方法是float: right：

HTML：

<div class="container closed">
  <button>Click</button>
  <!-- some divs with class "child" inserted with js -->
</div>

的CSS：

.container {
  height: 80px;
  width: 330px;
  margin: auto;
}

button {
  float: right;
  margin: 1.3em 1.6em 0 0;
}

.closed {
  overflow-y: hidden;
}

.child {
  width: 50px;
  height: 30px;
  background-color: grey;
  display: inline-block;
  margin: 1em;
}

所以这似乎与float: right一起使用，但是浮点数太过分了:-)是否有更清晰的按钮定位方式？我认为flexbox能够做到这一点，但无法想出用Flexbox实现这一目标的方法。有什么建议吗？

UPD：添加了相关的html和css代码。

Answer 1

如果您使用CSS3的flexbox的flex属性，就可以使用CSS实现这一点，就像您说的那样。我做了一个小演示来证明这一点。

CSS的核心部分在于：

display: flex;
flex-flow: row-reverse wrap;

display: flex将在可用宽度范围内展开内容，row-reverse将从右到左对齐项目（LTR为默认值）。阅读更多about flexbox at MDN。

另一部分是菜单高度的切换，我不知道你（可以）有多少项，但在演示中我使用了一些vanilla JavaScript来展开和折叠菜单。

var mainNav = document.getElementById('menu-list');
var navToggle = document.getElementById('expandbutton');

function mainNavToggle() {
  mainNav.classList.toggle('expanded');
}

navToggle.addEventListener('click', mainNavToggle);

.menu {
  height: 60px;
}

.list,
.list-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  height: 50px;
  overflow: hidden;
}

.list-item {
  width: 25%;
  padding: 3px;
  box-sizing: border-box;
}

.btn {
  background-color: teal;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 3px;
  margin: 5px 0;
  color: white;
  text-decoration: none;
}

.top-right {
  border: 0;
  width: 100%;
  display: block;
  background-color: red;
}

.list.expanded {
  height: 100px;
}

.list > .list-item:nth-last-child(n+4) ~ .list-button {
  order: 1;
}

.list > .list-item:nth-child(n+4) {
  order: 2;
}

<div class="menu">
  <ul class="list" id="menu-list">
    <li class="list-item"><a href="#" class="btn">Button</a></li>
    <li class="list-item"><a href="#" class="btn">Button</a></li>
    <li class="list-item"><a href="#" class="btn">Button</a></li>
    <li class="list-item"><a href="#" class="btn">Button</a></li>
    <li class="list-item"><a href="#" class="btn">Button</a></li>
    <li class="list-item"><a href="#" class="btn">Button</a></li>
    <li class="list-item list-button">
      <button href="#" id="expandbutton" class="btn top-right">Expand</button>
    </li>
  </ul>
</div>

修改

我使用flexbox order属性更新了代码段，这在这种情况下非常有用（MDN reference）。

.list > .list-item:nth-last-child(n+4) ~ .list-button {
  order: 1;
}

.list > .list-item:nth-child(n+4) {
  order: 2;
} 

order的初始值为0。如果您想要移动订单，则必须高于初始值，这就是我们需要将.list-button项设置为order: 1的原因。 按钮后面的所有元素都需要落后于按钮（如果每行4个元素），那么:nth-child(n+4)需要order: 2。有关小型演示，请参阅更新的代码段。