从flex布局中的justify-content中排除具有固定定位的元素 [英] Exclude element with fixed positioning from justify-content in flex layout

问题描述

我目前正在尝试使用flexbox建立一个响应式网站布局。

根据屏幕尺寸，我想要一个元素具有 position ：fixed; 这本身是工作。但是当我使用 justify-content：space-between; 在包含一个元素的列上，固定; 空间分布使用此元素作为0高度元素。

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

在第一个例子中，我创建了我想要的最终结果看起来像。为了使空间分布正常工作，我不得不在 .column 之外移动 #fixed

在第二个例子中，我创建了所需的HTML标记。当你比较两个例子并排时，你会注意到间隔在第二个看起来奇怪。浏览器不会在这里发生错误，因为有一个元素，它在分配空间时必须遵守。我总是希望浏览器假装 #fixed 不在容器内，因此在分发空间时不会考虑。

这是结果应如何显示： https://jsfiddle.net/5nu9nsyL/3/

这是html的外观： https://jsfiddle.net/5nu9nsyL/4/

（只有Chrome和Safari会正确显示它们，所以如果两者看起来一模一样，浏览器像Firefox或IE）

我希望我清楚我想要什么。

必须在容器上使用 display：flex .column ）

（我也需要一个免费的JavaScript，只有CSS的解决方案）

解决方案

这是Firefox 错误874718 。 规范说

justify-content property aligns flex项目rel =nofollow

由于绝对（包括固定地）定位元素是流出的，不是 flex项（这在绝对定位的Flex子项中完全定义）。所以 justify-content 应该忽略它。

但是Firefox将它封装在一个匿名flex项目中， a href =https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items =nofollow>旧规范：

Flex容器的绝对定位子节点本身不是
flex项目，但它们在正常
位置留下占位符在箱子树。这些占位符是带有宽度，高度和行高为'0'的匿名内联
框，它们通常使用flexbox布局算法来交互
。特别是，他们将
触发匿名flex项目的创建，或者在匿名flex项目中加入相邻的
inline元素。

为了解决这个问题，我推荐 justify-content -flexbox-1 /＃auto-marginsrel =nofollow> 自动边距：

  .column> div：not（：first-child）{
 margin-top：auto; 
} 
  

这将在flex容器的子项之前平均分配可用空间，第一。效果应该像 justify-content：space-between 。

在固定元素的情况下 auto margin只会计算为 0 。

div class =snippetdata-lang =jsdata-hide =false>

  .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 = > < div>元素1< / div> < div id =fixed>元素2< / div> < div>元素3< / div> < div>元素4< / div> < div>元素5< / div>< / div>  

I'm currently trying to build a responsive website layout with flexbox.

Depending on the screen size I want an element to have position: fixed; This itself is working. But when I use justify-content: space-between; on a column that contains an element that gets moved out of the of column itself with position: fixed; the space distribution uses this element as an 0 height element.

For the sake of demonstration I set up two examples. Both do not use media queries because they are not the problem.

In the first example I created what I want the final result to look like. I had to move #fixed outside of .column in order for the space distribution to work properly.

In the second example I created the desired HTML markup. When you compare both example side by side you will notice that the spacing looks odd in the second. The browser is not making an error here because there is an element it has to respect when distributing the space. I (in a nutshell) would like the browser to pretend #fixed is not inside the container and therefore not consider it when distributing space.

This is how the result should look: https://jsfiddle.net/5nu9nsyL/3/

And this is how the html should look: https://jsfiddle.net/5nu9nsyL/4/
(Only Chrome and Safari renders it correctly. So if both look the same to you have a look at it with a different browser like Firefox or IE)

I hope I made my it clear what I want.

(Note I must use display: flex on the container .column)

(I also need a JavaScript free, CSS only solution)

解决方案

This is Firefox bug 874718. The spec says

The justify-content property aligns flex items along the main axis of the current line of the flex container.

Since an absolutely (including fixedly) positioned element is out-of-flow, is not a flex item (this is fully defined in Absolutely-Positioned Flex Children). So justify-content should ignore it.

But Firefox wraps it inside an anonymous flex item, according to an old spec:

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.

To fix that, instead of using justify-content, I recommend aligning with auto margins:

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

That will distribute free space equally before the children of the flex container, except the first one. The effect should be like justify-content: space-between.

In the case of the fixed element, that auto margin will just compute to 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>

这篇关于从flex布局中的justify-content中排除具有固定定位的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！