如何利用flex弹性实现多列固定与自适应布局

为了兼容不同分辨率大小的终端设备显示，有时需要采取flex进行弹性布局，在分辨率大小改变的时候部分内容能够自适应显示区域。

一列固定一列自适应

首先，写出HTML结构代码。#aside为固定的侧边栏，#detail为适应分辨率伸缩的详情页。

然后给出样式。对父元素设置弹性flex，使两个区域分成两列。给固定侧边栏#aside的宽高赋具体值。#detail只给高度值，然后使复合样式flex:1；
flex:1;为flex-grow=1,flex-shrink=1,flex-basis=:0;的复合写法。

运行效果如下:

两列固定一列自适应

将两个固定列放在两边，使中间列自适应。
给出HTML结构代码：

CSS样式代码：

效果图：

两行固定一行自适应

此种布局非常常用，固定的两行分别为页面头部和尾部，中间一行为内容行，可根据内容多少进行自适应。

下面给出HTML结构代码：

CSS样式代码：

效果图：