弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器设置属性 display:flex
一、容器属性
flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap
⑴ flex-direction 子元素排列方向
flex-direction: row从左到右
flex-direction: row-reverse从右到左
flex-direction: column从上到下
flex-direction: column-reverse从下到上
⑵ flex-wrap 子元素换行方式
flex-wrap: nowrap不换行
flex-wrap:wrap换行
flex-wrap: wrap-reverse反转 wrap 排列，行颠倒
2 justify-content 子元素沿主轴对齐方式
justify-content: flex-start
justify-content: space-between
3 align-items 子元素在交叉轴上对齐方式
align-items: center垂直方向居中
align-items:flex-start垂直方向的顶部/交叉轴的起点对齐
align-items: flex-end垂直方向的底部/交叉轴的终点对齐
align-items: baseline项目的第一行的文字的基线对齐
align-items: stretch默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
二、子元素属性（写在子元素下）
align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
align-items: center
align-items: flex-start
align-items: flex-end
align-items: baseline
align-items: stretch
order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0，可以为负值。
flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。
flex-grow: 0默认值，即如果存在剩余空间，也不放大。
flex-grow: 1如果存在剩余空间，放大 ，等分剩余空间。
flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。
flex-shrink: 1默认值，即如果空间不足，缩小。
flex-shrink: 0不缩小。
flex-basis 定义元素的默认基准值。
设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。
如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。
链接：https://juejin.cn/post/7038088241437736991
如果单单是这个需求，好多写法可以做到，要 CSS3的画，可以用 flexbox。
写了个小例子供参考：
CSS :
<style>.flexbox {
display: -webkit-flex
display: -ms-flexbox
display: flex
overflow: hidden
}
.flexbox .col {
flex: 1
padding: 20px
}
.flexbox .col:first-child {
background: cyan
-webkit-order: 1
-ms-flex-order: 1
order: 0
}
.flexbox .col:last-child {
background: pink
-webkit-order: 0
-ms-flex-order: 0
order: 1
}
body {
padding: 20px
}
</style>
HTML :
<div class="flexbox"><div class="col">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div class="col">
<p>2</p>
</div>
</div>
flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>flex box 弹性布局 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
html,body{height:100%margin:0}/*需要添加高度控制，否则无法撑满整个屏幕*/
body{
display:-webkit-box
-webkit-box-orient:vertical/*按照垂直方向上进行自适应处理*/
}
.content{-webkit-box-flex:1/*分配剩余的所有空间*/} .header{height:50pxmin-width:500px}/*顶部模块高度定死*/
.logo{width:100pxheight:50pxbackground:#99f}/*为区分模块，设置了背景色 logo部分固定宽高*/
.nav{height:50pxbackground:#ccc}/*nav模块不固定宽度*/
.content{min-height:100px}/*为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度*/
.content,.header{display:-webkit-box/*为content,header部分也添加box的展示模式*/}
.nav{-webkit-box-flex:1}
.con2{-webkit-box-flex:1}
.con1{width:200pxbackground:#f99}/*固定宽度，高度不定*/
.con2{min-width:200pxbackground:#999}/*同上的min-height*/
.con3{width:100pxbackground:#9f9}/*固定宽度，高度不定*/
.footer{height:50pxmin-width:500pxbackground:#ccc}/*固定高度*/
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div class="header">
<div class="logo">logo部分，宽高固定</div>
<div class="nav">nav部分，高度固定，宽度自适应</div>
</div>
<div class="content">
<div class="con1">内容初始化第1模块</div>
<div class="con2">内容初始化第2模块</div>
<div class="con3">内容初始化第3模块</div>
</div>
<div class="footer">底部，宽度不定，高度固定</div>
</body>
</html>
