我怎样才能有一个职位：固定； flexbox 大小的元素的行为？答案

【问题标题】：How can I have a position: fixed; behaviour for a flexbox sized element?我怎样才能有一个职位：固定； flexbox 大小的元素的行为？
【发布时间】：2015-05-16 04:06:26
【问题描述】：

我有一个名为 .side-el 的 div，我希望它处于以下位置：固定；行为，但是一旦我应用位置固定，宽度就会从右侧交替变化。正确的宽度将是 flexbox 设置的宽度。我怎样才能实现这个目标？

.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>

【问题讨论】：

你不能。绝对定位的元素会从文档的正常流程中取出。
好的，你能把这个作为答案发布吗？

标签： css flexbox

【解决方案1】：

你不能。

正如CSS2.1 spec所解释的：

绝对定位的框脱离正常流程。

Flexible Box Layout 规范确认：

flex container 的绝对定位子代不会参与弹性布局。但是，它确实参与了 reordering step（见order），这对他们的绘画顺序。

^{（强调我的）}

【讨论】：

【解决方案2】：

@Daniel，我知道这已经很晚了，但是......虽然接受的答案是正确的，但我觉得这不是很有帮助。我有同样的问题（这就是我遇到这篇文章的方式），我想我会采用的解决方案是将位置固定元素包装在 flex 元素中。这是一个（非常丑陋的）example

相关标记

  <aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl">
    <div class="Layout-aside-inner">
      <button ng-click="collapsed = !collapsed">
        <span ng-show="collapsed">&gt;</span>
        <span ng-hide="collapsed">&lt;</span>
      </button>
      <ul class="Layout-aside-content">
        <li ng-repeat="i in items">{{i}}</li>
      </ul>
    </div>
  </aside>

相关 CSS

.Layout-aside {
  order: 0;
  min-width: 140px;
  width: 140px;
  background-color: rgba(0, 255, 0, .4);
  transition: width .4s, min-width .4s; 
}
.Layout-aside.isCollapsed {
  min-width: 25px;
  width: 25px;
}

.Layout-aside-inner {
  position: fixed;
}

.Layout-aside.isCollapsed .Layout-aside-inner {
  width: 25px;
}

.Layout-aside.isCollapsed .Layout-aside-content {
  opacity: 0;
}

【讨论】：

【解决方案3】：

一个更简单的解决方案是在main-el 容器上使用overflow-y:scroll 和height: 100vh。这将为side-el 容器提供固定位置的外观，而无需使用位置：固定。

【讨论】：

唯一的问题是中心内容元素上的滚动条看起来非常糟糕，希望它像浏览器窗口一样放在侧面
.它不好使用为多级 div 固定的位置，这是为了保持我网站上的一切整洁！

【解决方案4】：

这是一种受引导程序启发的方法：

.fixed-top {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

这为您的 flex-box 提供了喘息的空间，并按照 flex-box 的方式进行操作。如果你的 flex-direction 是列，你可以使用 top, left, bottom 代替。

这是因为当你给一个元素一个固定的位置和一个 0 的 left 和 right 或一个 0 的 top 和 bottom 时，元素被拉伸以从左到右填充空间，或从上到下。这反过来又允许 flex-box 在没有固定位置的情况下使用您期望的空间量。

【讨论】：

在我的回答中添加了解释。希望它对您有意义。
这个答案对我有用，应该被视为解决方案。
这可以避免移动设备上的滚动条出现 vh 问题。有了这个 css，栏就会保持可见。
用于 flexbox 的干净整洁的解决方案
感谢您的提示！

【解决方案5】：

你可以用css替代position: sticky来实现它

效果很好，但唯一的问题是浏览器支持（2018 年 6 月）： https://caniuse.com/#feat=css-sticky

希望快点好起来。

【讨论】：

这很好。我喜欢看到 ECMA 得到改善。
是的，那个很好很清晰。适合持久的侧边栏和东西。

【解决方案6】：

我遇到了同样的问题，实际上我只是找到了一种方法来设置 flex-box，导航栏的宽度，并在固定位置居中。

nav {
    display: flex;
    height: 50px;
    width: 90%;
    left: 5%;
    position: fixed;
}

我希望能够在一个固定位置但居中有一个 flex-box 导航栏。所以我所做的是做左边的 5%，因为这等于剩下的 10% 宽度的一半。试试看，它可能对你有帮助！ :)

【讨论】：

【解决方案7】：

position:sticky was mentioned by Juozas Rastenis above 但没有代码示例。这是一个极简主义的例子：

* {
  box-sizing: border-box;
}

body {
 display: flex;
 margin: 0;
}

nav {
 width: 20%;
 height: 100vh;
 top: 0; /* this is required for "sticky" to work */
 position: sticky;
 background: lightblue;
 padding: 1rem;
}

main {
 height: 3000px; /* cause scroll */
 background: lightpink;
 flex-grow: 1;
 padding: 1rem;
}

<body>
 <nav>
  sidebar here
 </nav>

 <main>
  content here
 </main>
</body>

【讨论】：

谢谢！从字面上看，唯一对我有用的解决方案。使用fixed 总是把<main> 搞砸（在“下面”<sidebar>）。
效果很好，非常感谢！