CSS布局-如何根据换行而不是视窗宽度对元素进行排序？

Question

我们在团队中处理的一个常见问题是布局标题，标题的左侧有一些图标，主标题，右侧有几个选项。

我想使用Flexbox，CSS Grid或其他任何可以工作的东西来解决这个问题。

我已经用Flexbox做了最多的实验，但还没能让它工作。

下面是屏幕变窄时的结构和我希望的换行方式(不考虑宽度断点)。

​

​

这段代码的HTML应该是这样的。

<div class="responsive-header">
    <div class="secondary slot-1">Secondary Slot 1</div>
    <div class="primary">Primary Slot</div>
    <div class="secondary slot-2">Secondary Slot 2</div>
</div>

对于Flexbox，CSS可能是这样的。

.responsive-header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .primary {
        flex: 2 1 auto;
        min-width: 10rem;
        text-align: center;
        order: 2;
    }
    .secondary {
        flex: 1 1 auto;
        min-width: 3rem;
        max-width: 8rem;

        &.slot-1 { text-align: left; order: 1; }
        &.slot-2 { text-align: right; order: 3; }
    }
}

然而，这导致当标题换行时，插槽1总是在顶部。

我知道如何使用order属性来改变媒体查询断点，但我更希望这是一个基于可用空间的动态调整。

埃塔：CodePen to play with

Answer 1

我对CSS不是很有经验，但我相信如果没有任何媒体查询或JS，你就不可能实现这样的事情。别忘了浏览器使用“级联样式表”。这意味着，当他们从上到下阅读代码时，会呈现一些东西。

改变元素的顺序至少需要某种媒体查询，尽管flex和grid可以创造奇迹，但它们并不那么聪明。我真的希望我错了，有人可以向我们展示一些网格解决方案，但是为什么你不这样做呢：

1. 从所有元素中移除order:，并让浏览器根据所需宽度上的标记
2. 对它们进行排序将order:-1;添加到主容器中，这样无论

是什么，它都会将其发送到容器的开头

​

.responsive-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  .primary {
    flex: 2 1 auto;
    min-width: 10rem;
    text-align: center;
  }
  .secondary {
    flex: 1 1 auto;
    min-width: 3rem;
    max-width: 8rem;
    &.slot-1 {
      text-align: left;
    }
    &.slot-2 {
      text-align: right;
    }
  }
}

@media (max-width:768px) {
  .primary {
    order: -1;
  }
}

<div class="responsive-header">
  <div class="secondary slot-1">Secondary Slot 1</div>
  <div class="primary">Primary Slot</div>
  <div class="secondary slot-2">Secondary Slot 2</div>
</div>

​

Answer 2

Flex仅在宽屏视图中有用(请注意，元素顺序已交换)。对于中等大小的屏幕，您需要浮动辅助元素。对于小屏幕，默认采用自然块渲染。

​

.responsive-header,
.primary,
.secondary {
  margin: 0;
  border: 0;
  padding: 0;
}

.primary {
  background-color: #fcd6b9;
}

.slot-1 {
  background-color: #e6e6c5;
}

.slot-2 {
  background-color: #d5ecfd;
}

@media only screen and (min-width: 600px) {
  .responsive-header {
    display: flex;
  }
  .primary {
    order: 2;
    flex: 1;
    text-align: center;
  }
  
  .secondary {
    float: none !important;
    width: 80px !important;
  }

  .slot-1 {
    order: 1;
  }

  .slot-2 {
    order: 3;
  }
}
@media only screen and (min-width: 400px) {
  .secondary {
    float: left;
    width: 50%;
  }
}

<div class="responsive-header">
    <div class="primary">Primary Slot</div>
    <div class="secondary slot-1">Secondary Slot 1</div>
    <div class="secondary slot-2">Secondary Slot 2</div>
</div>

​