«
定宽 + 自适应

时间：2022-5   

定宽 + 自适应

定宽 | 自适应

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

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

float + margin

我们有如下html代码：

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

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

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

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

float + overflow

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

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

这种方案如果要间距，可以在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就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

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

  1. 如果垂直方向上有多个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;
}

  1. BFC是一个独立的容器，不会被浮动元素覆盖，里面的文字也不会环绕浮动元素，我们这里的两栏布局就是利用的这个特性。

  2. 计算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 有两个值：

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;
}

定宽 | 定宽 | 自适应

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

不定宽 + 自适应

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

不定宽：float + overflow

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

不定宽：table

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

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

不定宽：flex

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

.parent5 {
    display: flex;
}

.left5 {
    margin-right: 20px;
}

.right5 {
    flex: 1;
}

多列不定宽 + 自适应

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

等宽

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

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; 对应的示意图为：

这次我们的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;
}

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

等宽：table

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

我们思考一下，如果不在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 就行了。

等高

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

等高：table

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

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

等高：flex

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

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

等高：float

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

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

终极方案：Grid

Grid是一个比flex还要强大的布局方案，所以我们这里把它单独拉出来讲，看看用grid怎么实现前面的需求。我们这里主要用到了grid布局的两个属性：

定宽 | 自适应

<div class="parent11">
    <div class="left11">
        <p>left11</p>
    </div>
    <div class="right11">
        <p>right11</p>
        <p>right11</p>
    </div>
</div>

.parent11 {
    display: grid;
    grid-template-columns: 100px auto;
    grid-column-gap: 20px;
}

定宽 | 定宽 | 自适应

只需要将上面的 grid-template-columns 改了就行了：

grid-template-columns: 100px 100px auto;

等宽

还是改 grid-template-columns ：

grid-template-columns: auto auto auto;

等高

上面的三个全部是等高的，不需要额外干什么。

总结

通过前面的几种布局，我们可以看到基本上都是用到了三个思路