【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除
背景
上篇 blog
【Ubuntu】【Hugo】搭建私人博客：侧边导航栏（四）
分析了 Flexbox 和 Grid 两种布局方式，并给除了 sidebar-related-posts.html 模板，下面就 sidebar-related-posts.html 继续分析
搭建私人博客
OK，下面继续看双栏布局 .post-with-sidebar
display: flex：将容器设置为 Flexbox 弹性盒子，使子元素（文章内容 + 侧边栏）可以水平排列flex-direction: row：子元素水平从左到右排列（默认值，显式声明更安全），配合 Flexbox 可以实现双栏布局gap: 2rem：在文章和侧边栏之间自动添加2rem的间距，比手动设置margin更简洁
这里 display: flex 和 flex-direction: row 是关键，没有设置它俩的话，文章内容和侧边栏就会挤在同一个垂直流中，也就是一个在上，一个在下，而不是左右并排，因为 HTML 元素默认是块级元素，遵循文档流，如果只有下面的 HTML
html
<div class="post-with-sidebar">
<div class="content">文章内容</div>
<aside class="sidebar">侧边栏</aside>
</div>在没有额外样式的情况下，浏览器会这样渲染：
就是所谓的挤在一起，其实是垂直堆叠，并不是期望的双栏，而使用 Flexbox 后，通过追加 CSS 样式
css
.post-with-sidebar {
display: flex;
flex-direction: row; /* 默认值，可省略 */
}就会变成下面这样
可以看到，两个子元素在同一行，并且可以控制各自宽度，gap 也能轻松加双栏间距
OK，来看下一个 CSS 样式
这段 CSS 代码主要对 .post-with-sidebar 容器中的侧边栏模块 .sidebar-related 样式（外观和行为）进行设置，其整体效果会表现为：对侧边栏内容进行布局和固定定位，让侧边栏在页面滚动时保持粘性（sticky），同时限制宽度，高度，并添加滚动，边框等视觉效果，下面详细解释型下
width: 300px：设置侧边栏的固定宽度为 300 像素flex-shrink: 0：在弹性布局中，禁止该元素被压缩缩小，即使容器.post-with-sidebar空间不足position: sticky：使用粘性定位，当用户滚动页面时，该元素会在到达某个位置（由下面的top定义）后，粘在窗口的指定位置，知道离开其父容器top: calc(var(--header-height, 80px) + 1rem)：定义粘性定位的粘住位置，这里的--header-height是 CSS 自定义属性，如果未定义则默认为80px（一般是网站顶部导航栏的高度），再加上1rem（大概是16px）的额外间距，所以侧边栏会在页面顶部导航栏下方再空出一点距离的位置开始站住height: calc(100vh - var(--header-height, 80px) - 2rem)：设置侧边栏的最大高度，100vh是整个视口高度（viewport，指的是整个浏览器窗口的可视区域高度 ，不是侧边栏，也不是页面内容区，而是用户当前能看到的整个屏幕高度），减去顶部导航栏高度（--header-height或默认80px）再减去上下各1rem的边距（共2rem），确保侧边栏不会超出可视区域overflow-y: auto：如果侧边栏内容超过其高度，则显示垂直滚动条padding-right: 1rem：右侧内边距为1rem，让内容不紧贴边框border-right: 1px solid var(--border-color, #eee)：在侧边栏右侧添加一条 1 像素宽的实线边框，颜色来自--border-color变量，若未定义则用浅灰色#eeebackground: var(--theme-bg, #fff)：背景色使用主题变量--theme-bg，若未定义则用白色#fffbox-sizing: border-box：使用border-box盒模型，宽度和高度包含 padding 和 border，避免尺寸计算出错margin-top: 3rem; margin-bottom: 2rem：上方留3rem外边距，下方留2rem，和正文内容格式保持一致
OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog