如何实现flex布局下侧边栏与页面顶部对齐

问题说明 #

当前实现的导航侧边栏没有从页面最顶部开始排布，最终需要实现：点击菜单图标切换侧边栏显隐，主内容区自动调整尺寸填充剩余空间，因此选用flex布局实现，现有代码如下：

<div class="sidebar" style="
    display: inline-block;
    margin:0px;  width: 175px; 
    background-color: black; 
    box-shadow: 1px 0 3px -1px white;
    height: 100%;
    overflow: hidden;">
    
    <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>
    <a href="" style="display:block; padding: 15px;">test</a> <hr>

</div>


    <div class="row"
    style=" 
        display: flex;
        flex-wrap: wrap;">

        <div class='column' 
        style="flex: auto;
            margin: 5px;
            padding: 15px;
            background-color: rgb(0,0,0,0);
            text-align: center;
            overflow: hidden;">
            Test2
        </div>
        <div class='column'>
            Test3
        </div>
    </div>

目前对页面元素排布流的理解存在困难，需要相关学习资源推荐。

解决方案 #

问题根源

1. 浏览器默认给html、body标签添加了8px左右的外边距，没有重置这部分默认样式，导致内容没法贴到视口最顶部
2. 只把flex布局加在了主内容区的.row容器上，侧边栏和主内容区的父容器没有设置为flex，二者还是按照普通行内块+块级元素的规则排布，既没法实现侧边栏固定、主内容自适应宽度的效果，侧边栏的height:100%也因为父元素没有明确高度无法生效。

修正代码

首先给页面加基础样式重置，把侧边栏和主内容区的共同父容器设为flex布局，就能实现目标效果，后续切换侧边栏显隐只需要给侧边栏加/删display:none的类，主内容区会自动占满宽度：

<style>
/* 重置默认边距，统一盒模型规则 */
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
/* 最外层容器设为flex，实现侧边栏+主内容并排 */
.page-wrap {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 175px;
  background-color: black;
  box-shadow: 1px 0 3px -1px white;
  flex-shrink: 0; /* 防止侧边栏被内容挤压变形 */
  color: #fff; /* 侧边栏文字改成白色不然黑底看不见 */
}
.main {
  flex: 1; /* 自动填充剩余宽度 */
}
/* 隐藏侧边栏的工具类，点击菜单时切换这个类即可 */
.sidebar.hide {
  display: none;
}
</style>

<div class="page-wrap">
  <div class="sidebar">
    <hr>
    <a href="" style="display:block; padding: 15px; color:#fff;">test</a> <hr>
    <a href="" style="display:block; padding: 15px; color:#fff;">test</a> <hr>
    <a href="" style="display:block; padding: 15px; color:#fff;">test</a> <hr>
  </div>

  <div class="main">
    <div class="row" style="display: flex; flex-wrap: wrap;">
      <div class='column' style="flex: auto; margin: 5px; padding: 15px; text-align: center; overflow: hidden;">
        Test2
      </div>
      <div class='column'>
        Test3
      </div>
    </div>
  </div>
</div>

学习建议

如果要搞懂页面元素排布规则，按顺序学习这几个核心点就行：

• CSS盒模型、外边距折叠规则
• 普通文档流的排布逻辑、块级元素/行内元素/行内块元素的差异
• BFC（块级格式化上下文）的触发条件和作用
• flex布局的容器属性、子项属性
• 定位（relative/absolute/fixed/sticky）的规则

可以找前端CSS布局基础、flex布局实战类的系统教程学习，学习的时候每学一个属性就手动改值看页面变化，比纯看理论理解快很多。

内容的提问来源于stack exchange，提问作者Mit Patel