向专业靠拢的5种flex经典布局：打造美观网站毫不费劲

上中下布局 - 传统且经典

上中下布局是网页中最常见的布局之一，简单明了，深受用户喜爱。其基本结构为页眉（头部）、内容（中部）和页脚（尾部）。我们使用flex将其实现：

html {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#header {
    flex: 0 0 auto;
}

#content {
    flex: 1 1 auto;
}

#footer {
    flex: 0 0 auto;
}

侧边栏布局 - 内容分明

在侧边栏布局中，左侧通常为固定宽度，包含菜单、导航栏等内容，而右侧则采用上中下布局。这种布局可以有效区分内容与导航，方便用户操作。

html {
    display: flex;
}

#sidebar {
    flex: 0 0 200px;
}

#main {
    flex: 1 1 auto;
}

固定布局 - 稳定可靠

固定布局通常用于头部和底部内容，例如网站的页眉和页脚。因为它们是固定的，在页面滚动时也不会改变位置，因此可以为用户提供更好的体验。

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

粘性布局 - 随滚动而动

粘性布局与固定布局相似，不同之处在于它只在特定条件下才被固定。例如，当用户滚动页面时，头部会固定在顶部，当页面滚动到一定位置时，头部会变为普通元素。

#header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}

响应式布局 - 适应各种设备

响应式布局是近年来非常流行的一种布局方式，它可以根据不同的设备屏幕大小进行调整，从而保证网站在不同设备上的良好显示效果。

html {
    width: 100%;
    height: 100%;
}

#content {
    flex: 1 1 auto;
    max-width: 1000px;
    margin: 0 auto;
}

结语

flex布局是一种非常灵活且强大的布局方式，掌握了它，前端开发人员可以轻松实现各种复杂的布局，从而打造出更加美观、实用的网站。