如何使 div 位于方向设置为 column 的 flex 容器的右侧？-解网

问：

我正在将 flex 用于标题栏和页面上的导航栏。

标题栏应位于屏幕顶部，导航栏应位于左侧。

内容应显示在标题栏下方和导航栏右侧。

但是，我（还）无法弄清楚如何让内容出现在导航栏的右侧（它想在导航栏下方的下一行）。

.flex-container-1 {
  display: flex;
  background-color: skyblue;
  color: white;
}

.flex-body-1 {
  padding: 1em;
}

.content-body {
  background-color: skyblue;
  color: white;
}

.flex-body-1:hover {
  background-color: white;
  color: skyblue;
}

.flex-container-2 {
  display: flex;
  width: min(90%, 100em);
  /* have a width which is the lesser of these two compared to viewport */
  margin-inline: auto;
  padding: max(1em, 2vh);
  /* choose whichever is bigger- 2% of viewport height, or 1em */
}

.nav-container {
  display: flex;
  flex-direction: column;
  width: 10em;
}

.nav-items {
  width: 10em;
}

.nav-items:hover {
  background-color: white;
  color: skyblue;
}

<html>

<head>
  <link rel="stylesheet" href="flex-2.css">
</head>

<body>
  <div class="flex-container-1">
    <div class="flex-body-1">Home</div>
    <div class="flex-body-1">About</div>
    <div class="flex-body-1">Contact</div>
  </div>
  <div class="content-body">
    <div class="nav-container">
      <div class="nav-items">Item 1</div>
      <div class="nav-items">Item 2</div>
      <div class="nav-items">Item 3</div>
      <div class="nav-items">Item 4</div>
      <div class="nav-items">Item 5</div>
    </div>
    <div>
      <h1>Main content</h1>
      <p>This is the main page of information that I want to display on my page.</p>
      <p>IT should sit to the right of the nav elements which should go along the left side of the page.</p>
    </div>
  </div>
</body>

</html>

HTML CSS 弹性框

Flex 只有一个主轴。如果你想让你的标题超过整个宽度，并且有两列并排在它下面 - 那么你可以通过把你的弹性项目布置成列，让它们换行，并使第一个“列”采用100%的宽度来“伪造”这一点。但恕我直言，如果侧边菜单和主要内容共享自己的 flex 父级，那会更干净。或者，你去看看，它或多或少地做了 flex 的作用 - 但同时针对两个轴。grid

0赞 David Buddrige 11/13/2023

谢谢堆@CBroe。你是对的 - 网格可能是这种特定布局的最佳选择。我一直在自学网格和弹性框 - 看看我能用它们做什么。将菜单和内容放入自己的 flexbox 中似乎确实解决了主要问题。

答：

0赞 user22379202 11/13/2023 #1

嘿，如果我正确理解了您的问题，这就是解决方案。

你只需要将 'content-body' 变成一个 flex 容器，并使用属性 'justify-content：space-between' （也可以试试 'justify-content：space-around' 可能更适合你）。我还建议您在 css 的顶部设置默认边距和填充 0，以确保标题和 2 个段落上丑陋的边距和填充不会弄乱设计。

下面是修改后的 css：

* {
  margin: 0;
  padding: 0;
}
.content-body {
  background-color: skyblue;
  color: white;
  display: flex;
  justify-content: space-between;
}

如何使 div 位于方向设置为 column 的 flex 容器的右侧？

How do I make a div sit to the right of a flex container that has its direction set to column?

评论

评论