个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我试图通过使用 justify-content: space-between 使 top-nav 和 bot-nav 部分垂直分隔>。但是，它什么也没做。有人可以指出我做错了什么吗？
@import url(https://fonts.googleapis.com/css?family=Rock+Salt);
html {
font-family: 'Rock Salt', cursive;
}
.flex-container {
display: flex;
}
header {
width: 300px;
height: 100vh;
position: fixed;
background-color: blue;
}
nav.flex-container {
align-items: center;
flex-direction: column;
justify-content: space-between;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#logo-container {
background-color: red;
width: 100%;
}
#logo {
margin: auto;
padding: 10px 0;
}<body>
<div id="root-container">
<header>
<div id="logo-container" class="flex-container">
<h2 id="logo">Name Goes Here</h2>
</div>
<nav class="flex-container">
<div class="top-nav">
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
</div>
<div class="bot-nav">
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
</div>
</nav>
</header>
</div>
</body>最佳答案
block 元素的高度默认为 block 内容的高度，除非您定义了特定的高度。 flexbox justify-content 定义了浏览器如何在 flex 元素之间和周围分配空间。所以默认情况下它不会对 flex-direction:column 产生任何影响。
在您的示例中，nav.flex-container 没有定义任何高度，您可以设置百分比 n%(因为您已经设置了 100vh 在 header 上，父元素)或 vh 值。
nav.flex-container {
height: 80%; /*your value*/
}
更新笔 - https://codepen.io/anon/pen/LGRqzy
或者，也将 header 设置为 display:flex，并在 nav.flex 上添加 。 flex:1 (grow) -容器
header {
display: flex;
flex-direction: column;
}
nav.flex-container {
flex: 1;
}
关于html - 为什么 justify-content space-between 什么都不做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34482262/
25
4
0
什么是 SASS 方法要求干燥这样的东西: .content p, .content ul, .content li, .content a 最佳答案 这 4 个元素都有共同的样式吗？ .conten
我正在评估 Contentful.com 作为 Angular SPA 的内容引擎。 我面临的问题是按内容类型检索条目(例如，获取“博客”类型的所有条目)。如 documentation exampl
在我编辑的主 wiki 上有一个名为 Item: 的自定义命名空间，提示是该命名空间内的每个页面都显示为 Item:This_item - - Item:That_item -- Item:Foo_i
我正在尝试编写一个Python脚本，可以将图片和pdf上传到WordPress。我希望图像上传到文件夹‘/wp-Content/Uploads/’，将pdf文件上传到文件夹‘/wp-Content/U
是否可以监控进行了多少次 Contentful API 调用，并理想地在即将超过配额时收到通知？ 谢谢 最佳答案 当然，您可以在右侧用户配置文件的下拉菜单 > Organizations and Bi
我在尝试在 IE8 中下载带有分号的文件名时遇到问题。 Response.AddHeader("Content-Disposition", "attachment; filename=\"" + at
我在 Contentful Delivery API 中运行查询以返回基于它的 slug 的特定页面项目。这个查询还设置了语言环境，以便它只返回我需要呈现的语言的数据。 但是，我还需要设置页面的 hr
我有兴趣使用 Gatsby建一个Netlify使用来自 Contentful 的内容的静态网站 Netlify 有这个不错的 Gatsby 入门指南: https://www.netlify.com/
目标是提交一个 git 分支。分支的“git status”的输出是: On branch zeromq_new Your branch is up to date with 'origin/zero
我目前正在学习在 ASP.NET 3.5 和 C# 中使用 MasterPages 和 ContentPlaceHolders - 现在，我正在拼命尝试通过我的编程代码编辑 asp:Content-C
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
我使用 bootstrap 3 作为我的网格框架和 CSS 来创建一个具有一个倾斜/倾斜边缘的半透明区域，但由于分层不透明度，我的元素遇到了问题。 期望是中心是倾斜的，但右侧仍然是正方形。 有没有更好
IllegalArgumentException: 未知 URL 内容:// ^ 对上述内容做了噩梦。我检查了我的变量和路径，但看不出问题是什么？非常感谢任何指点! 这是我的痕迹。 java.lan
我有两个元素:一个是 元素，另一个是 元素。 populated-drop-down extends drop-down ，但是，正如您可能已经猜到的那样，它会尝试使用一些选项预先填充它。假设我可以简
我想我也有同样的问题。 Using multiple yields to insert content 我尝试了这个解决方案。我试过 在我的 application.html.erb 中有 conte
此链接 ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) 表示 justify-content 和 align-content 的
我现在正在探索绑定(bind)，并且有一个 NSPopUpButton - 它为我提供了一些值选择下的绑定(bind)选项 - Content , Content Objects , Content
正在尝试在内容页面中加载内容 View 。当我运行代码时，它不会出现在我的内容 View 中。我正在从我的内容页面分配两个可绑定(bind)参数。 内容页面: 内容 View :
我想从我的 :before 标签中获取 content。我知道有些人会说它不是真正的(伪)元素，但在 JS 中有一种方法，但有人可以帮助我在 JQ 中做到这一点，因为我有多个标签并且我想用 $.eac
我创建了一个.sh脚本，并将结果记录在一个文件中，执行后我会尝试将文件内容作为mail正文发送。 这是我运行的命令: sh update.sh >> update.$(date +"%Y-%m-%d:
我是一名优秀的程序员,十分优秀！