固定flex元素在第一行的末尾

Question

我需要始终在flex容器（使用flex-wrap: wrap）的第一行末尾修复一些元素。 示例（请注意按钮“展开”）：

我尝试使用'row-reverse'+'order：-1'，但是在这种情况下，元素从左到右（当我需要从右到左时）移到新行。

这是我的摘录：https://jsbin.com/divavosafu/1/edit?html,css,output

有什么想法吗？

Answer 1

只需将编号的按钮嵌套在一个元素中，然后将其和主容器都设置为弹性容器即可。

.container {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  resize: horizontal;
  overflow: auto;
}

.numbers {
  display: flex;
  flex-flow: row wrap;
}

.expand {
  flex: 1 1 auto;
}

.right {
  flex: 0 0 auto;
}

.item {
  display: inline-block;
  margin: 4px;
  padding: 8px;
  border: 1px solid gray;
}

<div class="container">
  <div class="numbers">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
  <div class="expand">
    <div class="item">Expand</div>
  </div>

  <div class="right">
    <div class="item right1">Right 1</div>
    <div class="item right2">Right 2</div>
  </div>
</div>

Answer 2

好像我找到了与解决方案类似的东西，但是按钮“ Expand”应该在左侧的“ container”中

.container {
  display: inline-block;
  width: 100%;
}

.right {
  float: right;
}

.item {
  display: inline-flex;
  padding: 8px;
  border: 1px solid #CECECE;
}

.item:not(:last-child) {
  margin-right: 8px;
  margin-top: 8px;
}

  <div class="container">
    <div class="right">
      <div class="item expand">Expand</div>
      <div class="item ">Right 1</div>
      <div class="item ">Right 2</div>
    </div>
    
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>