为什么 align-self 属性在使用 flex 时不能与导航栏一起使用？

Question

这应该是一个粘性导航栏，但永远不会变粘。我读到我必须使用 align-self: flex-start; 来解决 flex 的这个问题，但遗憾的是我没有这样做。

body { padding-bottom: 2000px;}
ul { list-style: none;}

.wrap {
 position: sticky;
 position: -webkit-sticky; 
 top: 0; 
 align-self: flex-start; 
}
.nav-bar { 
 display: flex; 
 flex-direction: row; 
 justify-content: flex-end; 
 background-color: #00aae4; 
 margin-bottom: 0;
 padding-right: 30px; 
 height: 50px; 
 margin-top:0; 
}
.nav-link { 
 padding-left: 0; 
 padding-right: 0; 
 background-color: #f1f1f1;
 width: 100px; 
 text-align: center;
 font-size: 20px; 
 margin-top: 5px; 
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<nav class="wrap">
          <ul class="nav-bar">
            <li class="nav-link">Luigis</li>
            <li class="nav-link">Menu</li>
            <li class="nav-link">Acerca de </li>
            <li class="nav-link">Contacto</li>
          </ul>
    </nav>
</body>
</html>

我已经尝试将 align-self 属性位置更改为 ul 的设置并使用了 top。还尝试通过仅使用 div 和 classes 来消除列表，但仍然没有结果。

Answer 1

来自the specification：

Intersection between the stickily positioned element and the bottom of the sticky-constraint rectangle limits movement in any direction, so the offset never pushes the stickily positioned element outside of its containing block. However, when the element is free to move within its containing block as the page is scrolled, it appears to be pinned to the relevant flow root edges, similarly to a fixed position element.

默认情况下，您的元素包含在 content-box 而不是 padding-box 中，在您的情况下 content-box 是由粘性元素定义的，因此如果没有粘性行为你添加一个大填充。

如果你增加一个很大的高度来增加 content-box，你可能会有粘性行为。

body {
  height: 2000px;
}

ul {
  list-style: none;
}

.wrap {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  background-color: #00aae4;
  margin-bottom: 0;
  padding-right: 30px;
  height: 50px;
  margin-top: 0;
}

.nav-link {
  padding-left: 0;
  padding-right: 0;
  background-color: #f1f1f1;
  width: 100px;
  text-align: center;
  font-size: 20px;
  margin-top: 5px;
}

<nav class="wrap">
    <ul class="nav-bar">
      <li class="nav-link">Luigis</li>
      <li class="nav-link">Menu</li>
      <li class="nav-link">Acerca de </li>
      <li class="nav-link">Contacto</li>
    </ul>
  </nav>

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box. ^ref

您可能对作为填充框的绝对定位元素的包含块感到困惑：

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

Otherwise, the containing block is formed by the padding edge of the ancestor.

为什么 align-self 属性在使用 flex 时不能与导航栏一起使用？

Why align-self property doesn't work with a navigation bar while using flex?

html

css

sticky

flexbox

为什么 align-self 属性 在使用 flex 时不能与导航栏一起使用？

Why align-self property doesn't work with a navigation bar while using flex?

html

css

sticky

flexbox

为什么 align-self 属性在使用 flex 时不能与导航栏一起使用？