css - 第一行右对齐静态元素的 Flex 元素

Question

我想使用 flex 制作一个响应式部分，其中静态元素在第一行右对齐。静态元素将占据第一行的可变空间(静态元素在不同布局中大小不同，因此它是可变空间)，其他元素应避免与静态元素重叠并在第一行没有时自动换行到第二行足够的空间。

预期结果:
屏幕宽度:768px
|------------------------------------------------ ------------------|
|[元素 1] [元素 2] [元素 3] [静态元素 1] [静态元素 2]|
|------------------------------------------------ ------------------|
屏幕宽度:320px
|--------------------------------------------|
|[元素 1] [静态元素 1] [静态元素 2]|
|[元素 2] [元素 3] |
|--------------------------------------------|


我试过下面的代码，但是静态项不能保留在第一行

.flex {
  display: flex;
  border: 1px solid black;
  flex-wrap: wrap;
}

.item {
  display: inline-flex;
  border: 1px solid blue;
  margin: 5px;
  white-space: nowrap;
}

.static {
  margin-left: auto;
  flex-wrap: nowrap;
  display: inline-flex;
}

<div class="flex">
  <div class="item">Dynamic Item 1</div>
  <div class="item">Dynamic Item 2</div>
  <div class="item">Dynamic Item 3</div>
  <div class="static">
    <div class="item">Static Item 1</div>
    <div class="item">Static Item 2</div>
  </div>
</div>

Answer 1

我对 float 有想法，如果你不想要 flex 样式，可以使用 inline-block

主要因素是...

• display:inline-block 在元素上
• float:right 在静态项上

在此示例中，您可以调整 div 框的大小以测试响应； )

.container{
  display:block;
  border: 2px solid;
  resize: both;
  overflow: auto;
  background-color: yellow;
}
.item{
display:inline-block;
  background-color: blue;
  margin: 10px 10px;
}
.item.static{
  float:right;
}

<div class="container">

  <div class="item static">item5</div>
  <div class="item static">item4</div>
  
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
</div>