从flex布局中的justify-content中排除具有固定定位的元素

Question

我目前正在尝试使用flexbox构建响应式网站布局.

根据屏幕尺寸,我希望元素具有position: fixed;此功能.但是当我justify-content: space-between;在包含一个元素的列上使用时,该元素会从列本身移出,position: fixed;空间分布使用此元素作为0高度元素.

为了演示,我设置了两个例子.两者都不使用媒体查询,因为它们不是问题.

在第一个例子中,我创建了我想要的最终结果.我不得不搬到#fixed外面.column,以使空间分布的正常工作.

在第二个例子中,我创建了所需的HTML标记.当您将两个示例并排比较时,您会注意到间距在第二个中看起来很奇怪.浏览器在这里没有出错,因为在分配空间时必须遵守一个元素.我(简而言之)希望浏览器假装#fixed不在容器内,因此在分配空间时不考虑它.

这是结果的样子:https://jsfiddle.net/5nu9nsyL/3/

这就是html应该看起来的样子:https://jsfiddle.net/5nu9nsyL/4/
(只有Chrome和Safari才能正确呈现.所以如果两者看起来都一样,你可以使用不同的浏览器来查看它,比如Firefox或者IE)

我希望我能说清楚自己想要什么.

(注意我必须display: flex在容器上使用.column)

(我还需要一个免费的,仅限CSS的解决方案)

Answer 1

这是Firefox的错误874718.该规范说

该justify-content属性沿着 flex容器的当前行的主轴对齐flex项.

由于绝对(包括固定)定位的元素是不流动的,因此不是弹性项目(这在绝对定位的Flex儿童中完全定义).所以justify-content应该忽略它.

但根据旧的规范,Firefox将其包装在一个匿名的灵活项目中:

Flex容器的绝对定位的子容器本身不是弹性项目,但是它们在盒子树中的正常位置留下"占位符".这些占位符是匿名内联框,宽度,高度和行高为"0",它们通常与flexbox布局算法交互.特别是,它们将触发创建匿名弹性项目,或者在其匿名弹性项目中加入相邻的内联元素.

要修复它,而不是使用justify-content,我建议使用auto边距对齐:

.column > div:not(:first-child) {
  margin-top: auto;
}

这将在flex容器的子节点之前平均分配自由空间,除了第一个.效果应该是这样的justify-content: space-between.

在固定元素的情况下,该auto边距将仅计算到0.

.column {
  display: flex;
  flex-flow: column nowrap;
  height: 300px;
  float: left;
  margin: 10px;
  border: 3px solid black;
}
.column > div:not(:first-child) {
  margin-top: auto;
}
.column > div,
#fixed {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  background-color: red;
}
#fixed {
  position: fixed;
  top: 0;
  right: 0;
}

<div class="column">
  <div>Element 1</div>
  <div id="fixed">Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
</div>

Answer 2

更新

再次审查OP后，目标是：

当屏幕宽度为一定尺寸时（我确定为720px+），#fixed(col2 ele2) 为position: fixed，如果宽度更小，则为position: static。当#fixed“固定”时，它不再位于 col2 中，因此 col2 的子项之间的间距会增加。所需要的是所有 div 之间的间距一致（即 col2 间距必须与 col1 间距一致）。

OP 没有提供显示两种状态的方法：固定状态和静态状态；其中需要建立静态。我添加了两个媒体查询，以确保#fixed在 720 像素处触发静态和固定状态。

@media screen and (min-width: 721px) {
  .spacer {
    display: none;
  }
  #fixed {
    position: fixed;
  }
  .column.column {
    justify-content: space-between !important;
  }
}

@media screen and (max-width: 720px) {
  .spacer.spacer {
    display: none !important;
  }
  #fixed {
    position: static;
  }
  .column.column {
    justify-content: space-between !important;
  }
}

由于某种原因，当仅应用属性display和时position，justify-content: space-between会中断。所以我将justify-content: space-between两个媒体查询都包含在内，不幸的是这也不起作用。于是我又加上了!important，还是失败。然后我使用了我的秘密忍者技术并将职业选择器加倍.column.column，我取得了胜利！加倍选择器将增加其胜过任何事物的特异性。

全屏模式下的 Plunker调整浏览器大小即可看到神奇效果。

预览模式下的 Plunker

我不明白你想做什么#fixed。但我确实理解演示中描述的问题：

第二列中元素 1 和元素 3 之间的空间应与其他空间的高度相同。

由于 的性质，第二列无法将其内容任意间隔预定长度justify-content: space-between，因此您需要与第一列一样多的 div 才能获得与第一列相同的间距。据我了解，你不能硬编码布局（HTML），所以我写了一些JS来创建一个不可见的div并将其附加到第二列，从而使元素1和3之间的空间与元素的子元素之间的空间相同第一列。

小提琴