Flex布局之余，你不可错过的经典布局方案

2023-09-20 23:32:45

经典网页布局：Flex 布局与非 Flex 布局

全屏布局：简约大气

全屏布局将网页内容无缝填满整个浏览器窗口，营造出沉浸式视觉体验。无论是图片集锦、视频展示还是产品宣传页面，全屏布局都是凸显视觉冲击力的理想选择。

Flex 布局实现全屏布局：

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#header {
  flex: 0 0 auto;
}

#main {
  flex: 1 1 auto;
}

#footer {
  flex: 0 0 auto;
}

非 Flex 布局实现全屏布局：

html, body {
  height: 100%;
}

#container {
  height: 100%;
}

#header {
  height: 100px;
}

#main {
  height: calc(100% - 100px - 100px);
}

#footer {
  height: 100px;
}

两列布局：经典实用

两列布局是网页布局中最常见的方案之一，将网页内容划分为两列，通常用于新闻网站、博客和电子商务页面。两列布局可同时展示多种内容，信息丰富且易于浏览。

Flex 布局实现两列布局：

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#sidebar {
  flex: 0 0 200px;
}

#main {
  flex: 1 1 auto;
}

非 Flex 布局实现两列布局：

html, body {
  height: 100%;
}

#container {
  height: 100%;
}

#sidebar {
  width: 200px;
  float: left;
}

#main {
  width: calc(100% - 200px);
  float: left;
}

三列布局：灵活多变

三列布局比两列布局更灵活，可将网页内容划分为三列，通常用于产品对比页面和价格比较页面，可突出显示特定列的内容。

Flex 布局实现三列布局：

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#sidebar1 {
  flex: 0 0 200px;
}

#main {
  flex: 1 1 auto;
}

#sidebar2 {
  flex: 0 0 200px;
}

非 Flex 布局实现三列布局：

html, body {
  height: 100%;
}

#container {
  height: 100%;
}

#sidebar1 {
  width: 200px;
  float: left;
}

#main {
  width: calc(100% - 400px);
  float: left;
}

#sidebar2 {
  width: 200px;
  float: left;
}