我怎样才能有一个位置:固定；弹性盒大小元素的行为? [英] How can I have a position: fixed; behaviour for a flexbox sized element?

问题描述

我有一个名为 .side-el 的 div，我想将它放在一个位置:fixed；行为，但是一旦我应用位置固定，宽度就会从右侧交替变化.正确的宽度将是由 flexbox 设置的宽度.我怎样才能实现这个目标?

.container {-webkit-align-content: flex-start;对齐内容:flex-start；-webkit-align-items: flex-start;对齐项目:flex-start；显示:-webkit-flex；显示:弹性；-webkit-flex-direction: 行；弹性方向:行；-webkit-flex-wrap:包裹；flex-wrap: 包裹;-webkit-justify-content: flex-start;justify-content: flex-start;* {box-sizing: 边框框；-webkit-flex-grow: 1;弹性增长:1；-webkit-flex-shrink: 0;弹性收缩:0；}}.main-el {box-sizing: 边框框；填充:0 2em;宽度:70%；}.side-el {box-sizing: 边框框；宽度:30%；}

<div class="main-el"><div style="background-color: red; height: 1000px;">content</div>
<div class="side-el" ><div style="background-color: red; height: 100px;">content</div>

解决方案

你不能.

如 CSS2.1 规范所述:

<块引用>

绝对定位的盒子脱离正常流程.

弹性框布局规范确认:

<块引用>

弹性容器的绝对定位子项不参与弹性布局.然而，它确实参与了重新排序步骤(请参阅order)，这对他们的绘画顺序.

^{(强调我的)}

I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?

.container {
  -webkit-align-content: flex-start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  
  * {
    box-sizing: border-box;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }
}


.main-el {
  box-sizing: border-box;
  padding:0 2em;
  width: 70%;
}

.side-el {
  box-sizing: border-box;
  width: 30%;
}

<div class="container" style="background-color: blue; height: 100px;">
  <div class="main-el">
    <div  style="background-color: red; height: 1000px;">content</div>
  </div>
  <div class="side-el" >
    <div style="background-color: red; height: 100px;">content</div>
  </div>
</div>

解决方案

You can't.

As explained by the CSS2.1 spec:

Absolutely positioned boxes are taken out of the normal flow.

And the Flexible Box Layout spec confirms that:

An absolutely-positioned child of a flex container does not participate in flex layout. However, it does participate in the reordering step (see order), which has an effect in their painting order.

^{(Emphasis mine)}

这篇关于我怎样才能有一个位置:固定；弹性盒大小元素的行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！