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

参见英文答案 > Absolutely positioned flex item is not removed from the normal flow in IE11                                    4个
我目前正在尝试使用flexBox构建响应式网站布局.

根据屏幕尺寸,我希望元素具有位置：固定;这本身就有用了.但是,当我使用justify-content：space-between;在包含一个元素的列上,该元素被移出列本身,其位置为：fixed;空间分布使用此元素作为0高度元素.

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

在第一个例子中,我创建了我想要的最终结果.我必须在.column之外移动#fixed以便空间分配正常工作.

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

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

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

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

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

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

解决方法

这是Firefox bug 874718. spec说

The 07002 property aligns 07003 along the
07004 of the current line of the flex container.

由于绝对(包括固定)定位的元素是不流动的,因此不是flex item(这在Absolutely-Positioned Flex Children中完全定义).因此,合理内容应该忽略它.

但根据old spec,Firefox将其包装在一个匿名的灵活项目中：

Absolutely positioned children of a flex container are not themselves
flex items,but they leave behind “placeholders” in their normal
position in the Box tree. These placeholders are anonymous inline
Boxes with a width,height,and line-height of ‘0’,and they interact
normally with the flexBox layout algorithm. In particular,they’ll
trigger the creation of anonymous flex items,or join neighboring
inline elements in their anonymous flex items.

要解决这个问题,我建议使用aligning with auto margins,而不是使用justify-content.

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

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

在固定元素的情况下,该自动边距将仅计算为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>