如何使用 flexbox 将项目移动到屏幕的不同侧面？

Question

我是 HTML/CSS 的新手，目前正在尝试学习 flexbox。我试图将我的无序列表一直移动到 div 的右侧，同时将标题保持在左侧。我尝试了 justify-content: space-between，但它只是将列表移到了 div.

的中间附近

.flex-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: DodgerBlue;
}

.nav-bar {
  background-color: purple;
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
  align-item: flex-end;
}

.nav-bar ul {
  list-style-type: none;
  display: flex;
}

.nav-bar ul li {
  padding: 2px;
  margin: 3px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="flex-container">
    <div class="nav-bar">
      <div>
        <h1>Title</h1>
      </div>
      <ul>
        <li><a href="#">Link 1</h1>
            <li><a href="#">Link 2</h1>
            <li><a href="#">Link 3</h1>
        </ul>
    </div>
    
</div>

</body>
</html>

Answer 1

你不需要 align-item: flex-end，而且宽度是 100vw 你可以使用容器的标准宽度，它总是 100

您的 HTML 也存在一些问题，我已经解决了。 a 没有正确关闭。

您可以在 MDN

上阅读有关 align-items here 的更多信息

标题在左边，链接在最右边，如您所愿。

运行下面的代码片段以查看它是否正常工作。

.flex-container {
  display: flex;
  height: 100vh;
  background-color: DodgerBlue;
}

.nav-bar {
  background-color: purple;
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
}

.nav-bar ul {
  list-style-type: none;
  display: flex;
}

.nav-bar ul li {
  padding: 2px;
  margin: 3px;
}

<div class="flex-container">
  <div class="nav-bar">
    <div>
      <h1>Title</h1>
    </div>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

</div>

Answer 2

有两个用于放置元素的属性，它们是 Justify-content: 和 align-content

align-content: 当横轴上有额外的 space 时，align-content 属性会在 flex 容器内对齐 flex 容器的行。 Justify-content: justify-content 属性将 flexed 容器的内容对齐在主轴上，默认情况下（在 Web 的情况下）是水平轴。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

你可以用下面的代码来解决你的问题

.flex-container {
  display: flex;
  height: 100vh;
  background-color: DodgerBlue;
}

.nav-bar {
  background-color: purple;
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
}

.nav-bar ul {
  list-style-type: none;
  display: flex;
}

.nav-bar ul li {
  padding: 2px;
  margin: 3px;
}

<div class="flex-container">
  <div class="nav-bar">
    <div>
      <h1>Title</h1>
    </div>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

</div>

如何使用 flexbox 将项目移动到屏幕的不同侧面？

How to move items to different sides of screen using flexbox?

html

css

nav

flexbox