不使用 float 完成三栏式布局,我分以下几步走：
1. 定义出大体的 HTML 结构
<body>
<div>
<div class="left">
<img src="" alt="Team Logo">
<span>Team name</span>
</div>
<div class="middle">
<p>东风夜放花千树，更吹落、星如雨。</p>
<p>宝马雕车香满路,凤箫声动，玉壶光转，一夜鱼龙舞。</p>
<p> 蛾儿雪柳黄金缕，笑语盈盈暗香去。</p>
<p> 众里寻他千百度,蓦然回首，那人却在，灯火阑珊处。</p>
<p> 没有纠结，无关爱情，犯不着低眉瞬目的期期艾艾，只是极尽盛大的繁华着，跑马观花，一路精彩。
纵情洒脱的走过火树银花的日子，寻觅一缕暗香的希望，蓦然回首，尚在，便持手。</p>
</div>
<div class="right">
<img src="" alt="Person Logo">
<img src="" alt="Person Logo">
<img src="" alt="Person Logo">
<img src="" alt="Person Logo">
</div>
</div>
</body>
2. 调节各 div 背景、边框等样式
body > div {
padding: 20px;
background-color: #eeeeee;
border: 1px solid #999;
}
.left {
width: 200px;
background-color: white;
}
img {
width: 80px;
height: 80px;
background-color: #eeeeee;
margin: 10px 10px;
line-height: 80px; /*为了让图片上的替代文字居中*/
}
.middle {
background-color: white;
text-align: left;
padding: 10px;
}
.right {
width: 120px;
background-color: white;
}
效果如下：
设置背景、边框等样式
3. 给最大的 div 设置 display:flex;
body > div {
padding: 20px;
background-color: #eeeeee;
border: 1px solid #999;
display: flex;
text-align: center; /*为了让文字居中*/
}
flex 布局之后
4. 给左右的 div 设置固定宽度；
之前已经设置过了。
5. 给中间的 div 设置 flex:1;
.middle {
flex: 1;
background-color: white;
text-align: left;
padding: 10px;
flex 是 flex-grow、flex-shrink、flex-basis的缩写。
5.1. flex 默认值 0 1 auto; 即
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
5.2. flex 取值为 none; 即
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
5.3. flex 取值为 atuo; 即
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
5.4. flex 取值为 非负数字; 则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，即
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
设置中间的 div ： flex:1; 体会与上一张图的差别
PS : 我还是难以理解这两张图不同的原因。初步认为是将其他 div 宽度固定，给剩下的 div设置 flex:1;可以实现剩下的这个 div 宽度自适应。
flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况：
- auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。
- content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
- 百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。
参考链接:flex设置成1和auto有什么区别
所以我暂时是这么理解的：
- 如果将 flex 设为 auto ; 或者 不设值 使其为默认值：
左 div : flex-basis: auto ; 值为 200px , 但是 里面的子元素最大占 100px ;
右 div : flex-basis: auto ; 值为 120px, 同上，子元素最大占 100px; - 如果中间 div 的 flex 为 1;
它的 flex-basis: 0%; 即为 0 宽度；才可以分配剩余空间的时候不影响固定宽度的div
5.5 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
5.6 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，即
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
6. 给左右中的 div 设置 height:100%;
.left {
width: 200px;
height: 100%; /* 去掉多余的高度空白* /
background-color: white;
}
.middle {
flex: 1;
margin: 0 20px;
background-color: white;
text-align: left;
padding: 10px;
height: 100%; /* 去掉多余的高度空白* /
}
最终效果
