1.左右定宽固定，中间自适应的布局
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????.outer{ ???????????background-color: #ccc; ???????????width: 800px; ???????????height: 600px; ???????????display: flex; ???????} ???????.A { ???????????background-color: #111; ???????????width: 100px; ???????????/*order: 1;*/ ???????} ???????.B { ???????????background-color: #444; ???????????/*order: 2;*/ ???????????flex: 1; ???????} ???????.C { ???????????background-color: blue; ???????????width: 200px; ???????????/*order: 3;*/ ???????} ???</style></head><body> ???????????<div class="outer"> ???????????<div class="A"></div> ???????????<div class="B"></div> ???????????<div class="C"></div> ???????</div> ???</body></html>用flex布局，核心是把中间元素声明flex:1，使其占满剩余空间
2.上下固定，中间自适应的布局
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.my{ ???????????background-color: #ccc; ???????????position: relative; ???????????width: 300px; ???????????height: 800px; ???????} ???????.a { ???????????height: 100px; ???????????background-color: red; ???????????position: absolute; ???????????top: 0; ???????????width: 300px; ???????} ???????.b { ???????????position: absolute; ???????????top: 100px; ???????????bottom: 100px; ???????????background-color: green; ???????????width: 300px; ???????} ???????.c { ???????????height: 100px; ???????????position: absolute; ???????????background-color: blue; ???????????bottom: 0; ???????????width: 300px; ???????} ???</style></head><body> ???<div class="my"> ???????<div class="a"></div> ???????<div class="b"></div> ???????<div class="c"></div> ???</div></body></html>用绝对定位布局，核心是中间元素的top与bottom给出来。
那这个上下固定，中间自适应是否可以用flex来做呢？显然可以，其实问题1与2都是可以用定位或flex来做的。只是在垂直方向上用flex，需要使用flex-direction：column来改变默认的row方向
注意，虽然改变了flex-dircetion主轴方向，但width仍然是已水平的海平面方向的，中间元素在高度方向上进行自适应了。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.outer { ???????????display: flex; ???????????flex-direction: column; ???????????height: 600px; ???????????width: 300px; ???????????background-color: #ccc; ???????} ???????.a { ???????????width: 300px; ???????????height: 100px; ???????????background-color: red; ???????} ???????.b { ???????????flex: 1; ???????????width: 300px; ???????????background-color: blue ???????} ???????.c { ???????????width: 300px; ???????????height: 100px; ???????????background-color: green; ???????} ???</style></head><body> ???????<div class="outer"> ???????<div class="a"></div> ???????<div class="b"></div> ???????<div class="c"></div> ???</div></body></html>几个CSS布局问题
原文地址：https://www.cnblogs.com/zhansu/p/9160385.html