CSS常用布局

本文是个人笔记，都是些基础用法，大佬请自行略过

多列等高，多行布局共用html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>常用布局</title>
  <style>
      html, body {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

多列等高布局

常见应用：三列布局，左右定宽，中间自适应

效果图如下：

普通实现（最不喜欢的方案）

html

<div class="container">
  <div>1</div><!--
  --><div>2</div><!--
  --><div>3</div>
</div>

css

.container {
  width: 100%;
  height: 100%;
}

.container>div {
  display: inline-block;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
  box-sizing: border-box;
}

.container>div:nth-child(2) {
  width: calc(100% - 200px);
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}

display 为 inline-block 时会有空隙，常见的解决方案有如下几种：

html不换行，但是这样不方便维护，可以通过添加注释的方法实现（示例代码用的就是这个方法）
将父元素 font-size 设为 0 ，子元素 font-size 重新设置正确的值（font-size 会继承父元素的值）
设置浮动，会影响布局（不推荐）
设置子元素的 margin 为负值
最好的方案：使用别的布局方案！！！

flex 实现

.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(2) {
  flex: 1;
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}

学习 flex 布局可以参考以下链接：

grid 实现

.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  /* grid-template-columns: 100px auto 100px; */
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}

学习 grid 布局可以参考以下链接

CSS Grid 网格布局教程-阮一峰老师
grid-MDN

table 实现

.container {
  display: table;
  width: 100%;
  height: 100%;
}

.container>div {
  display: table-cell;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  width: 100px;
}

多行布局

常见应用：上中下布局，上下定高，中间自适应

实现与多列类似，下面是具体代码

效果图如下：

普通方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
}

.container>div {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  background-color: #0ff;
  box-sizing: border-box;
}

.container>div:nth-child(2) {
  /* width: 80%;
  margin: auto; */
  height: calc(100% - 200px);
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  height: 100px;
}

如页脚需要固定在页面底端，请另行处理

flex 方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
  display: flex;
  flex-direction: column;
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}

.container>div:nth-child(2) {
  flex: 1
}

.container>div:nth-child(1), .container>div:nth-child(3) {
  height: 100px;
}

grid 方式

.container {
  width: 100%;
  height: 100%;
  /* height: 200vh; */
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  /* grid-template-rows: 100px auto 100px; */
}

.container>div {
  border: 1px solid #000;
  background-color: #0ff;
}

多行多列

常见应用：三行三列，两行三列等

示例为三行三列——左右列定宽，中间列自适应；上下行定高，中间行自适应

效果图如下：

flex 方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>混合-多行多列-flex</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      height: 100%;
      /* height: 200vh; */
      display: flex;
      flex-direction: column;
      text-align: center;
    }

    header, footer {
      height: 100px;
      display: flex;
    }

    section {
      flex: 1;
      display: flex;
    }

    header>div, section>div, footer>div {
      width: 100px;
      border: 1px solid red;
    }

    header>div:nth-child(2), section>div:nth-child(2), footer>div:nth-child(2) {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </header>
    <section>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </section>
    <footer>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </footer>
  </div>
</body>
</html>

grid 方式

html<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>混合-多行多列-grid</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      height: 100%;
      /* height: 200vh; */
      display: grid;
      /* grid-template-columns: 100px auto 100px;
      grid-template-rows: 100px auto 100px; */
      grid-template: 100px auto 100px / 100px auto 100px;
    }

    .container>div {
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>

参考链接：🏩grid模板属性，实现三列两行布局 - #掘金沸点#

兼容性

flex：flex-caniuse

grid: grid-caniuse

flex 的兼容性比较好

所以：flex 大法好，但也不能滥用哦~

掘友如果有其他的方案可以评论区交流