css auto的margin不应该通过填充可用的空白来将元素推到最远吗?

tzdcorbm  于 2023-02-10  发布在  其他
关注(0)|答案(3)|浏览(112)

Image of my current layout
我正在学习flexbox,我正在尝试创建一个常见的布局,可以在 Jmeter 板类模板中找到,这类模板包含左侧的主导航菜单(侧边栏),顶部导航菜单用于用户通知或网站主题等内容,顶部导航菜单下方是主要内容区域。
我所面临的问题是,我的导航列表项“B”(它周围有一个白色边框,以供查看)由于某种未知原因没有被推到“紫色”div的底部。
我将navul元素的高度都设置为100%,这样它们就可以和主体一样占据垂直空间,所以根据我的理解,添加一个margin-top: auto实际上应该会将B一直推到底部。
我的理解是否有根本性的问题?我是否在正确实施这种主题的正确轨道上?
感谢您抽出时间与我们分享您的知识!

* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
  /* border: 1px solid black; */
}

body {
  display: flex;
  height: 100vh;
}

#left {
  background-color: aqua;
  width: 5rem;
}

.column {
  display: flex;
  flex-direction: column;
}

.top-left,
.top-right {
  padding: 1rem;
  background-color: aliceblue;
}

nav {
  background-color: red;
  height: 100%;
}

ul {
  background-color: blueviolet;
  height: 100%;
}

nav ul li:last-child {
  margin-top: auto;
  border: 1px solid white;
}

#right {
  background-color: orange;
  flex-grow: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="./project.css" rel="stylesheet">
</head>

<body>
  <div id="left" class="column">
    <div class="top-left">
      Logo
    </div>
    <nav>
      <ul>
        <li>A</li>
        <li>B</li>
      </ul>
    </nav>
  </div>

  <div id="right" class="column">
    <div class="top-right">
      Top right
    </div>
    <div>
      Content
    </div>
  </div>
</body>

</html>
flvlnr44

flvlnr441#

我设法通过向ul元素添加以下CSS属性来将B推到底部:

display: flex;
flex-direction: column;

我仍然不确定为什么需要这样做。

qlfbtfca

qlfbtfca2#

CSS代码正确,但应用到了错误的元素。ul应获取flex box属性,以便所有li项显示为列。请将flex属性应用到ul

* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
  /* border: 1px solid black; */
}

body {
  display: flex;
  height: 100vh;
}

#left {
  background-color: aqua;
  width: 5rem;
}

.column  {
  display: flex;
  flex-direction: column;
}

.top-left,
.top-right {
  padding: 1rem;
  background-color: aliceblue;
}

nav {
  background-color: red;
  height: 100%;
}

ul {
  display: flex;
  flex-direction: column;
  background-color: blueviolet;
  height: 100%;
}

nav ul li:last-child {
  margin-top: auto;
  border: 1px solid white;
}

#right {
  background-color: orange;
  flex-grow: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="./project.css" rel="stylesheet">
</head>

<body>
  <div id="left" class="column">
    <div class="top-left">
      Logo
    </div>
    <nav>
      <ul>
        <li>A</li>
        <li>B</li>
      </ul>
    </nav>
  </div>

  <div id="right" class="column">
    <div class="top-right">
      Top right
    </div>
    <div>
      Content
    </div>
  </div>
</body>

</html>
lymnna71

lymnna713#

如果要使用margin-top:auto,请尝试以下操作:

ul {
    background-color: blueviolet;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

您也可以尝试其他方式,如:

ul {
  display: flex;
}

nav ul li:last-child {
  align-self: flex-end;
}

网格

ul {
  display: grid;
}

nav ul li:last-child {
  align-self: flex-end;
}

相关问题