深掘 CSS3 Flex 布局的奥秘：打造无界限的灵活页面布局

/* 设置基本的HTML和body样式，确保整个页面都可以使用Flex布局 */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
 
/* 设置顶部工具栏样式 */
header {
    background-color: #333;
    color: white;
    padding: 1em;
}
 
/* 设置主要内容区域样式 */
main {
    flex: 1; /* 这确保了主内容区域会占据除工具栏和底部栏之外的所有可用空间 */
    overflow: hidden; /* 防止子元素溢出 */
    display: flex; /* 使用Flex布局让侧边栏和主内容区并排 */
}
 
/* 设置侧边栏样式 */
nav, aside {
    background-color: #f8f8f8;
    color: #333;
    padding: 1em;
}
 
/* 设置侧边栏宽度，并使其固定 */
nav, aside {
    flex: 0 0 200px; /* 这将固定侧边栏的宽度，并防止它根据内容的大小而改变 */
}
 
/* 设置主内容区样式 */
section {
    flex: 1; /* 这确保了主内容区域会占据除侧边栏之外的所有可用空间 */
    padding: 1em;
}
 
/* 设置底部信息栏样式 */
footer {
    background-color: #333;
    color: white;
    padding: 1em;
}

这段代码展示了如何使用Flexbox布局来创建一个具有顶部工具栏、底部信息栏和可伸缩的主内容区的网页结构，其中主内容区又可以分为侧边栏和主内容区两部分。这种布局方式非常灵活，可以适应不同的屏幕尺寸和内容需求。