Question

我有一个名为.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>

Answer 1

@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;
}

Answer 2

这是一种灵感来自bootstrap的方法：

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

这为你的柔性盒提供了呼吸空间和灵活盒子。如果您的flex-direction是列，则可以改为使用top, left, bottom。

这是有效的，因为当您为元素指定固定位置且left和right为0或top和bottom为0时，该元素将被拉伸为从左到右，或从上到下填充空间。这反过来又允许弹性盒使用你没有固定位置的空间。

Answer 3

你不能。

正如CSS2.1 spec：

所解释的那样

绝对定位的框从正常流程中取出。

Flexible Box Layout规范确认：

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

^{（强调我的）}

Answer 4

您可以使用CSS替代position: sticky

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

希望很快会好起来。

Answer 5

更简单的解决方案是在curl: (7) Failed to connect to localhost port 9200: Connection refused容器上使用overflow-y:scroll和height: 100vh。这将使main-el容器的固定位置出现，而无需求助于position：fixed。

Answer 6

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>

Answer 7

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

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

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

我怎么能有一个职位：固定; flexbox大小元素的行为？

7 个答案: