主页 / 问题 / 1244261
Accepted
Dev18
Asked:2022-02-15 18:53:50 +0800 CST2022-02-15 18:53:50 +0800 CST

align-self 不会下降

  • 772

.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav-item {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
}

.setting {
  align-self: flex-end;
  color: red;
}
<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link setting">
        внизу прикреплен
      </div>
    </li>
  </ul>
</div>

flex 看这里我试图降低页面列表的第 4 个元素，还有一个示例，我尝试了在提出问题时在网站上弹出的其他示例，但由于某种原因，最后一个元素遵循三个背靠背？

以下是我在搜索过程中遇到的其他一些网站：

the-echoplex.net

css-tricks.com

我是这样试的，不一样

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav-item {
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
  color: green;
}

.foot {
  align-self: flex-end;
  color: red;
}
<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link foot">
        внизу прикреплен (!!!)
      </div>
    </li>
  </ul>
</div>

但这是应该的，但是从编写代码的角度来看它是丑陋的

.nav {}

.nav-item {
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
}

.foot {
  margin-top: 200px;
}
<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link foot">
        внизу прикреплен
      </div>
    </li>
  </ul>
</div>

html

1 个回答

  1. Best Answer

    嗯，首先，你.nav的没有高度，所以最后一个项目不能下降到任何地方（它已经在最底部）。

    其次，位置不能设置在 block.foot上，而是设置到最后一个元素上li，因为受 flex 影响的是列表中的元素。

    第三，align-self: flex-end它不会帮助你 - 它只会将最后一个项目向右移动（因为你有flex-direction: column）。

    必须使用margin-top: auto

    .nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 200px;
  border: 1px solid red;
}

.nav-item {
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
  color: green;
}

.foot {
  color: red;
}
.nav-item:last-of-type {
  margin-top: auto;
}
    <div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link foot">
        внизу прикреплен (!!!)
      </div>
    </li>
  </ul>
</div>

    • 2

相关问题