多列布局

作者: 蒋鹏飞_ | 来源:发表于2020-01-15 13:53 被阅读0次

多列布局在一个网页设计中非常常见，不仅可以用来做外部容器的布局，在一些局部也经常出现多列布局，比如下面圈出来的都是多列布局：

image-20200113220846222

定宽 + 自适应

定宽 | 自适应

我们先讲一个最简单的两列布局，左边列定宽，右边列自适应：

image-20200113221036196

下面我们来看看有哪些方法可以解决这个问题：

float + margin

我们有如下html代码：

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

当我们没有给他设置样式的时候，它是这样子

image-20200113222241883

我们要的是两列布局，所以我们给left加一个float:left;，然后它变成这样了：

image-20200113222421242

我们看到right的内容环绕了left，这是浮动（float）的一个特性，那怎么解决呢? 因为右边环绕了左边，我们只需要将右边往右边移过去就行了: margin-left: 100px;如果左右两列还想要一点间距，margin-left设置大一点就行了。

image-20200113223157002

float + overflow

这个方案和前面的float + margin的方案很像，只是解决右边环绕左边的思路不一样，我们先给左边写float:left;右边还是会环绕左边：

image-20200113222421242

这次我们解决这个问题不用margin-left了，而是用overflow:

image-20200113223619772

这种方案如果要间距，可以在left上设置一个margin-right: 20px;。为什么overflow:hidden可以决绝浮动环绕的问题呢，这其实用到了BFC的原理。下面我们来讲讲BFC:

BFC

BFC（Block Formatting Context）块级格式上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

下列情况都可以形成一个BFC:

1\. 浮动元素，float 除 none 以外的值； 
2\. 定位元素，position（absolute，fixed）； 
3\. display 为以下其中之一的值 inline-block，table-cell，table-caption； 
4\. overflow 除了 visible 以外的值（hidden，auto，scroll）；

BFC有如下特性：

1\. 内部的Box会在垂直方向上一个接一个的放置。
2\. 垂直方向上的距离由margin决定
3\. bfc的区域不会与float的元素区域重叠。
4\. 计算bfc的高度时，浮动元素也参与计算
5\. bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

上面几个特性怎么理解呢？

如果垂直方向上有多个div，他们都有margin，那垂直的margin会合并
```
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

.child {
    margin-top: 10px;
    margin-bottom: 20px;
}
```
上述代码两个child之间的间距是20px，而不是30px，因为垂直的margin会合并。但如果我给上面第一个child再套一个容器，使用overflow:hidden;他就成了一个BFC，根据BFC的特性，BFC的子元素不会影响外面的元素，margin就不会合并，两个child的间距就是30px;
```
<div class="parent3">
  <div class="overflow">
    <div class="child3">child4</div>
  </div>
  <div class="child3">child4</div>
</div>

.child3 {
    margin-top: 10px;
    margin-bottom: 20px;
}

.overflow {
    overflow: hidden;
}
```
BFC是一个独立的容器，不会被浮动元素覆盖，里面的文字也不会环绕浮动元素，我们这里的两栏布局就是利用的这个特性。
计算BFC高度时，浮动元素的高度也会计算其中，这不就是我们用来清除浮动的一种做法吗?
```
.parent {
    overflow: hidden;
}
```

table

我们还可以用table来实现，父级设置display为table，那他的宽度就是内容的宽度，所以我们需要手动指定宽度为100%。两个子级设置display为table-cell，这样他们其实就相当于table的两个单元格。由于我们要固定左边的宽度，父级table应该使用布局优先，即table-layout: fixed;。这时候如果左右两边要间距，是没法设置margin的，因为他们是单元格，但是我们可以在左边子级上设置padding-right.

<div class="parent4">
  <div class="left4">
    <p>left4</p>
  </div>
  <div class="right4">
    <p>right4</p>
    <p>right4</p>
  </div>
</div>

.parent4 {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.left4 {
    display: table-cell;
    width: 100px;
    padding-right: 20px
}

.right4 {
    display: table-cell;
}

table-layout

table-layout有两个值：

fixed：是表格布局优先，列宽由表格宽度和列宽度设定，而与单元格的内容无关。这种模式下，浏览器在接收表格第一行后就可以渲染出来，速度更快。
auto: 这是默认值，表示表格内容优先，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

flex

又遇到flex了，用flex做这种布局太简单了，直接父级设置display: flex, 左子级定宽，右子级设置flex:1就行了，如果要间距，可以直接用margin。

.parent5 {
    display: flex;
}

.left5 {
    width: 100px;
    margin-right: 20px;
}

.right5 {
    flex: 1;
}

flex: 1

flex: 1是flex: 1 1 0的简写，对应的完全体是：

{
    flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

flex-grow：设置元素的扩展比例。假如父级元素总宽度为500px, 子元素A, B, C三个元素的flex-grow分别为1, 2, 2，那他们的宽度比例为1:2:2，三个元素最终的宽度为100px, 200px, 200px;
flex-shrink: 设置元素的收缩比例。假如父级元素总宽度为500px,现在有A, B, C, D, E五个子元素，他们的flex-shrink分别为1, 1, 1, 2, 2,他们的flex-basis都是120px。计算可知，五个子元素总宽度为120 *5 = 600px，超出了父级100px，所以需要对子元素进行收缩。收缩的时候就要通过flex-shrink来计算，我们发现他们flex-shrink的总和为1 + 1 + 1 + 2 + 2 = 7。所以将超出的100px分成7份，每份约14px，然后按照flex-shrink进行收缩。A, B ,C的份数都是1，所以他们收缩14px，他们的最终宽度是120 - 14 = 106px；D, E的份数是2，所以他们应该收缩14 *2 = 28px，最终宽度是120 - 28 = 92px。
flex-basis: 设置元素的初始值，扩展和收缩都以此为参照物。

定宽 | 定宽 | 自适应

三列布局，前面两列定宽，最后一列自适应，这个跟前面的一列定宽，一列自适应的很像，很多方案都可以直接用, 比如用float + overflow。

image-20200114162854615

不定宽 + 自适应

image-20200114163050252

两列布局，左边不定宽，宽度由内容决定，右边自适应的常见解决方案：

不定宽：float + overflow

跟前面定宽的写法很像，只是左边子级宽度不能写死了，要留给它的子元素决定。

image-20200114163359831

不定宽：table

用table也可以实现，但是要注意，table-layout不能设置fixed了，因为左边宽度不定，我们可以不设置他，这样就是默认值auto。默认的table天生宽度就是内容决定的，左右两边如果内容一样长，那他们的长度可能是一样的，都有留白，像这样：

image-20200114163857549

但是我们想要的是左边挤到内容区，留白都给右边，只需要给左边一个很小的宽度，比如width: 0.1%或者1px都行。

image-20200114164209914

不定宽：flex

又是flex，跟之前定宽的很像，只需要把前面左边的宽度去掉就行了。

.parent5 {
    display: flex;
}

.left5 {
    margin-right: 20px;
}

.right5 {
    flex: 1;
}

多列不定宽 + 自适应

image-20200114164529075

多列不定宽+自适应前面几种方案都可以实现，以float + overflow为例：

image-20200114164719925

等宽

image-20200114164804503

等宽布局就是几个元素，每个元素的宽度是一样的，而且他们之间还可能有间距。如果没有间距，这个很好实现，每个元素宽度25%就行了，但是如果有间距，还设置25%，里面的内容就超出父容器了，就会掉下来。那应该怎么做呢？仔细看写，我们会发现他们有如下关系：

image-20200114165200857

C = W * N + G * (N -1);  // 此处N为4
// 变换为
C = W * N + G * N - G；
// 再变为
C = (W + G) * N - G;
// 最后变为
C + G = (W + G) * N;

C + G = (W + G) * N;对应的示意图为：

image-20200114165625839

这次我们的html结构如下所示，间距是20px：

<div class="parent6">
  <div class="column"><p>1</p></div>
  <div class="column"><p>2</p></div>
  <div class="column"><p>3</p></div>
  <div class="column"><p>4</p></div>
</div>

等宽：float

通过前面的公式可知，我们需要将父级拓宽一个间距，即20px，用margin-left: 20px即可实现。每个子元素左浮动，宽度为25%，同时padding-left: 20px，这个是间距，我们为了让间距是在宽度内部减出去，还需要设置box-sizing: border-box;。

.parent6 {
    margin-left: -20px;
}

.column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}

image-20200114171032294

用float的方式布局有一个不足之处，就是我们写死了25%，这个只适用于4列，如果不知道几列就不能这么写了，当然用JS动态计算不算。

等宽：table

用table就不用写死25%，因为在table-layout:fixed的情况下，列宽不是根据内容计算的，默认列宽是相等的，天生就是等宽。但是在实现的时候需要注意，我们需要在parent外面再套一个容器，因为用table肯定会把parent设置成table,宽度是100%，没办法进行拓宽，再套一个容器的目的就是给他拓宽用的。

image-20200114171823653

我们思考一下，如果不在parent外面再套一层容器能不能解决？当然是能解决的，在外面再套一层容器的目的无非就是拓宽parent宽度，我们可以直接指定parent宽度为calc(100% + 20px)，这样实际的内容会靠右20px，我们再用相对定位左移20px就行了：

.parent8 {
    display: table;
    width: calc(100% + 20px);
    table-layout: fixed;
  position: relative;
    left: -20px;
}

.column3 {
    display: table-cell;
    padding-left: 20px;
}

等宽：flex

用flex实现这个太简单了，每个子元素都设置flex:1就行了。

image-20200114174136226

等高

等高布局要实现的就是当一列高度被撑高时，另一列也会跟着被撑高。

image-20200114174301840

等高：table

又是table，表格的一行里面不同的单元格天生就是等高的。

image-20200114175219551

这个方案里面table-layut:fixed;可以不设置。间距用透明的border-right来做。background-clip是一个CSS3属性，表示背景要显示到的区域，有三个值：

border-box: 背景被裁剪到边框盒。
padding-box: 背景被裁剪到内边距框。
content-box: 背景被裁剪到内容框。

等高：flex

万能的flex又来了，也很简单，跟前面定宽+自适应的解决方案是一样的。

image-20200114175737940

这是因为flex默认的align-items就是stretch，就是拉伸到充满容器。

等高：float

前面的布局解决方案里面都有float，等高能用float解决吗？答案是可以的，但是稍微麻烦点。在前面定宽+自适应的基础上给左右子元素都写一个极大的padding-bottom，这样两个子元素的高度都很大了，然后我们用一个同样的大的负的margin-bottom和父级的overflow:hidden将高度减回来。

image-20200114180646852

这样做虽然左右子元素看起来是一样高的，但是调试可以发现，他们的高度已经加了9999px，远远超过父容器了。这并不是真正意义上的等高，真正意义上的等高还是要用前面两种方案。