怎么实现三列布局（左侧和右侧宽度固定，中间自适应）

怎么实现三列布局（左侧和右侧宽度固定，中间自适应）

绝对定位 + 中间板块不给宽度

<div class="box">
  <div class="left">左侧</div>
  <div class="center">中间</div>
  <div class="right">右侧</div>
</div>
复制代码

.left {
    position: fixed;
    left: 0;
    top: 0;
}
.right {
    position: fixed;
    right: 0;
    top: 0;
}
.center {
    width：auto;
}
复制代码

两侧浮动 + 中间自动撑开 中间宽度用 calc 计算，设置两侧对应宽的 margin

<div class="box">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
  <div class="center">中间</div>
</div>
复制代码

.left {
  float: left;
  background: red;
  width: 100px;
}
.right {
  float:right;
  background: blue;
  width: 100px;
}
.center {
  background: yellow;
  width: calc(100% - 200px);
  margin: 0 100px;
}
复制代码

flex

深入理解 flex-grow & flex-shrink & flex-basis

左右设置flex-basis, 中间设置flex-grow

<div class="box">
  <div class="left">左侧</div>
  <div class="center">中间</div>
  <div class="right">右侧</div>
</div>
复制代码

.box {
  height: 100%;
  display:flex;
}
.center {
  flex-grow: 1;
  background: red;
}
.left, .right {
  flex-basis: 100px;
  background: yellow;
}
复制代码

flex 具体是怎么实现三列布局的

左侧和右侧的宽度通过flex-basis设置宽度，中间自适应通过flex-grow

设为flex属性后，子元素的哪些属性会失效

float、clear 和 vertical-align