Mobile-firstflex三栏布局

默认优先显示移动端，通过@media属性适配屏幕变化。使用flexbox相关的CSS属性display:flex;(父元素)flex-wrap:nowrap|包装|换行-反转；(父元素，子元素之外如何显示)flex:flex-growflex-shrinkflex-basis;(子元素，如何为子元素分配空间)order:number;（子元素，子元素的顺序应该如何排列）重点在父元素上设置显示：flex和flex-wrap：wrap通过flex调整子元素上的空间分配（膨胀、收缩比例和拉伸参考value)通过order调整子元素的显示顺序(把.center放在中间)示例CSS.box{display:flex;弹性包装：包装；文本对齐：居中；}.center{背景颜色：#f00;弹性：100%1；}.left,.right{flex:100%1;}.left{背景颜色：#0f0;}.right{背景颜色：#00f;}@mediaalland(min-width:400px){.left,.right{flex:50%1;}}@mediaalland(min-width:800px){.box{flex-wrap:nowrap;}.center{命令：2；弹性：1；}.left,.right{flex:00300px;}.left{命令：1；}.right{命令：3；}}HTMLFlexbox是CSS3的一种新的布局方式CSS3Flexbox（FlexibleBox或flexbox），是一种在页面需要时保证元素正确行为的布局方式以适应不同的屏幕尺寸和设备类型。引入flexbox布局模型的目的是提供一种更有效的方式来为容器中的子元素排列、对齐和分配空白。