Flexbox容器中的项目订单

Question

我正在尝试构建媒体查询，这将在草图上工作。有什么建议吗？

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: lightblue;
  width: 100%;
  padding: .5rem;
  box-sizing: border-box;
}

.name {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 40px
}

.options {
  display: flex;
  flex-direction: row;
}

.option {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 80px;
}

.action {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
}

@media (max-width: 350px){
  .name     {order: 1}  
  .action   {order: 2}
  .options  {order: 3}

  .container {
    flex-direction: column;
    flex-wrap: wrap;
  }
}

  <div class="container">
    <div class="name">Lorem ipsum</div>
    <div class="options">
      <div class="option">2</div>
      <div class="option">3</div>
      <div class="option">4</div>
    </div>
    <div class="action">
      5
    </div>
  </div>

我已经开始，但我真的不满意:)。我需要更稳定的东西，因为我稍后会在这里使用它。

https://codepen.io/danzawadzki/pen/mwPYMz

此时我正在改变媒体查询中的顺序和弹性方向，但这还不够好。框号1将包含段的名称，因此它应具有固定的宽度。在一列中会有多个这样的项目，所以我宁愿保持它看起来干净，比例相同。

Answer 1

使用它可能会对你有用

1-2
2-2
3-1
4-3

Answer 2

如果您更改了@media并删除flex-direction: column并将flex-basis: 100%添加到option，则会在图片显示时显示

@media (max-width: 350px){
  .options  {
    order: 1; flex-basis: 100%;
  }
  .container {
    flex-wrap: wrap;
  }
}

注意，我还删除了.name和.action规则，因为它们不是必需的

Fiddle demo

Stack snippet

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: lightblue;
  width: 100%;
  padding: .5rem;
  box-sizing: border-box;
}

.name {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 40px
}

.options {
  display: flex;
  flex-direction: row;
}

.option {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 80px;
}

.action {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
}

@media (max-width: 350px){
  .options  {
    order: 1; flex-basis: 100%;
  }
  .container {
    flex-wrap: wrap;
  }
}

＆＃13;

<div class="container">
    <div class="name">Lorem ipsum</div>
    <div class="options">
      <div class="option">2</div>
      <div class="option">3</div>
      <div class="option">4</div>
    </div>
    <div class="action">
      5
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

更新

通过设置.options { flex-grow: 1; }和.option { flex: 1 1 80px; }，您可以使用options / option元素填充更广泛屏幕上的剩余空间

Fiddle demo 2

Stack snippet 2

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: lightblue;
  width: 100%;
  padding: .5rem;
  box-sizing: border-box;
}

.name {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex-basis: 40px
}

.options {
  flex-grow: 1;
  display: flex;
}

.option {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
  flex: 1 1 80px;
}

.action {
  background-color: white;
  padding: 1rem;
  margin: .25rem;
}

@media (max-width: 350px){
  .options  {
    order: 1; flex-basis: 100%;
  }
  .container {
    flex-wrap: wrap;
  }
}

＆＃13;

<div class="container">
    <div class="name">Lorem ipsum</div>
    <div class="options">
      <div class="option">2</div>
      <div class="option">3</div>
      <div class="option">4</div>
    </div>
    <div class="action">
      5
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;