html - 将行布局折叠到较小宽度的列，而不会丢失前一个元素的边距顶部

Question

目标
我正在尝试完成以下任务:

当屏幕足够宽时，.firstItem (红色)和 .lastItem (蓝色)元素，其宽度事先未知 , 位于父项的左右部分 .layout分别。

当屏幕变窄并且元素之间的水平间距减小到 $minimalHorizontalSpaceBetweenItems 时，布局折叠为列，但 .firstItem仍然有理由向左和.lastItem向右:

元素之间的垂直空间 $verticalSpaceBetweenItems不得影响单行配置中的布局。

下面是黄色的 CSS 规则 .preceedingElement块上方.firstItem和 .lastItem必须工作:

.preceedingElement + .layout {
   margin-top: Npx;
}

基本 MWE

<div class="preceedingElement"></div>
<div class="layout">
  <div class="firstItem"></div>
  <div class="lastItem"></div>
</div>

社会保障:

.preceedingElement{
  width: 100%;
  height: 30px;
  background: #FAD7A0;
}

@mixin TwoSpacedItemsComposition(
  $minimalHorizontalSpaceBetweenItems: 0,
  $verticalSpaceBetweenItems: 0
) {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  margin-top: -$verticalSpaceBetweenItems;
  margin-right: -$minimalHorizontalSpaceBetweenItems;
  
  
  > *{
    margin-top: $verticalSpaceBetweenItems;
    margin-right: $minimalHorizontalSpaceBetweenItems;
    
    &:last-child {
      margin-left: auto;
    }
  }
}
  
.layout {
  @include TwoSpacedItemsComposition(
    $minimalHorizontalSpaceBetweenItems: 12px,
    $verticalSpaceBetweenItems: 24px
  )
}

.firstItem {
  width: 200px;
  height: 34px;
  background: #EC7063;
}

.lastItem {
  width: 400px;
  height: 24px;
  background: #7FB3D5;
}

Flex 解决方案尝试
在SASS mixin下面实现了除第四个之外的所有目标:

@mixin TwoSpacedItemsComposition(
  $minimalHorizontalSpaceBetweenItems: 0,
  $verticalSpaceBetweenItems: 0
) {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  margin-top: -$verticalSpaceBetweenItems;
  margin-right: -$minimalHorizontalSpaceBetweenItems;
  
  
  > *{
    margin-top: $verticalSpaceBetweenItems;
    margin-right: $minimalHorizontalSpaceBetweenItems;
    
    &:last-child {
      margin-left: auto;
    }
  }
}

干扰是margin-top: -$verticalSpaceBetweenItems;对于 parent 和 margin-top: $verticalSpaceBetweenItems;给 child 。
🌎 JS Fiddle
网格解决方案尝试
网格始终呈现 2 行。

@mixin TwoSpacedItemsComposition(
  $minimalHorizontalSpaceBetweenItems: 0,
  $verticalSpaceBetweenItems: 0
) {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  grid-gap: $verticalSpaceBetweenItems $verticalSpaceBetweenItems;

  align-items: center;


  >* {

    &:first-child {
      justify-self: start;
    }

    &:last-child {
      justify-self: end;
    }
 }

Answer 1

您的 flexbox 方法似乎工作得很好...正在更改 margin-top: $verticalSpaceBetweenItems;至 margin-bottom: $verticalSpaceBetweenItems;应该解决要求 #4，并且您的原始 flexbox 代码已经解决了前三个问题。
JSFiddle:https://jsfiddle.net/yx689sh4/