display:-webkit-flex

display:-webkit-box ，display:flex; 伸缩盒模型box-orient 子元素排列 horizontal | vertical |

display:-webkit-box ，display:flex; 伸缩盒模型

box-orient 子元素排列 horizontal | vertical | inline-axis | block-axis | inheritbox-flex 兄弟元素之间比例，仅作一个系数box-align box 排列box-direction box 方向box-flex-group 以组为单位的流体系数box-lines
box-ordinal-group 以组为单位的子元素排列方向box-packflex 这个值让元素产生块级伸缩容器盒。inline-flex 这个值让元素产生行内级伸缩容器盒。

列1：<nav class="main-nav"><ul class="main-nav-list"><li><a href="http://chaofu200900.blog.163.com/blog/#">新闻</a></li><li><a href="http://chaofu200900.blog.163.com/blog/#">财经</a></li><li><a href="http://chaofu200900.blog.163.com/blog/#">股票</a></li><li><a href="http://chaofu200900.blog.163.com/blog/#">体育</a></li><li><a href="http://chaofu200900.blog.163.com/blog/#">娱乐</a></li><li><a href="http://chaofu200900.blog.163.com/blog/#">微博</a></li></ul></nav>

.main-nav-list { margin:0 auto; overflow:hidden;padding:0 12px; display:-moz-box; display:-webkit-box;/在父级元素上添加/ display:box;}

.main-nav-list li { display:block; -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; height:20px;line-height:20px; margin-bottom:12px}

.main-nav-list a { display:inline-block; color:white; font-size:16px; text-shadow:0 1px 1px rgba(12,65,172,.75)}

.main-nav-list:last-child { padding-top:3px}.main-nav-list li:last-child a { padding-right:0}

.main-nav { background-color:#4488d3; background:#0077cc; -webkit-background-size:auto 75px; text-align:center; padding-top:10px}2.wrap {display: -webkit-box;-webkit-box-orient: horizontal;}.child {min-height: 200px;border: 2px solid #666;margin: 10px;font-size: 40px;font-weight: bold;font-family: Georgia;-webkit-box-align: center;}.w200 {width: 200px}.flex1 {-webkit-box-flex: 1}.flex2 {-webkit-box-flex: 2}

<div class="wrap"><div class="child w200">200px</div><div class="child flex1">比例1</div>< div class="child flex2">比例2</div></div>3header, footer, section { border: 10px solid #333; font-family: Georgia; font-size: 40px; text-align: center; margin: 10px;}#doc { width: 80%; min-width: 600px; height: 100%; display: -webkit-box; -webkit-box-orient: vertical; margin: 0 auto;}header,footer { min-height: 100px; -webkit-box-flex: 1;}#content { min-height: 400px; display: -webkit-box; -webkit-box-orient: horizontal;}.w200 {width: 200px}.flex1 {-webkit-box-flex: 1}.flex2 {-webkit-box-flex: 2}.flex3 {-webkit-box-flex: 3}

<div id="doc"><header>Header</header>< div id="content"><section class="w200">定宽200</section><section class="flex3">比例3</section>< section class="flex1">比例1</section></div><footer> Footer</footer></div>----------------------------------------1flex复合属性。设置或检索伸缩盒对象的子元素如何分配空间。是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto[ flex-grow ]：定义弹性盒子元素的扩展比率。[ flex-shrink ]：定义弹性盒子元素的收缩比率。[ flex-basis ]：定义弹性盒子元素的默认基准值(宽度)。#div{display:flex; width:500px;}#div1{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; }#div2{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; flex:1 1 300px;}#div3{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; flex:1 2 100px;}flex:1 2 100px;(后两个属性可选。)<div id="div"><div id="div1">flex 指定了一个伸缩项目该如何分配主轴上的剩余空间</div><div id="div2"></div><div id="div3"></div></div>2justify-content 主轴对齐,用于调整主轴上伸缩项目的位置flex-start 默认值。项目位于容器的开头。 flex-end 项目位于容器的结尾。 center 项目位于容器的中心。 space-between 项目位于各行之间留有空白的容器内。 space-around 项目位于各行之前、之间、之后都留有空白的容器内#div{ display:flex; justify-content: center;}#div1{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}#div2{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}#div3{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}html同上3align-items 侧轴对齐（子元素必须结合flex用）stretch 默认值。项目被拉伸以适应容器。 center 项目位于容器的中心。 flex-start 项目位于容器的开头。 flex-end 项目位于容器的结尾。 baseline 项目位于容器的基线上。#div{ display:flex; align-items:center; height:100px; width:100%; background:#CCCCCC}#div1{ height:30px; background:#FF0; border:solid 1px #F00; width:100px; flex: 1;}#div2{ height:30px; background:#FF0; border:solid 1px #F00; width:100px; flex: 1;}#div3{ height:30px; background:#FF0; border:solid 1px #F00; width:100px; flex: 1;}html同上4flex-wrap 伸缩行换行nowrap 默认值。规定灵活的项目不拆行或不拆列。wrap 规定灵活的项目在必要的时候拆行或拆列。wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。#div{ display:flex; flex-wrap: nowrap; height:200px; width:100%; background:#666;}#div1{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}#div2{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}#div3{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}html同上5flex-direction 属性规定灵活项目的方向row 默认值。灵活的项目将水平显示，正如一个行一样。row-reverse 与 row 相同，但是以相反的顺序。column 灵活的项目将垂直显示，正如一个列一样。column-reverse 与 column 相同，但是以相反的顺序。initial 设置该属性为它的默认值。inherit 从父元素继承该属性。#div{display: flex; flex-direction:row-reverse; }#div1{ height:20px; background:#FF0; border:solid 1px #F00; flex:1;}#div2{ height:20px; background:#FF0; border:solid 1px #F00; flex:1}#div3{ height:20px; background:#FF0; border:solid 1px #F00; flex:1}6flex-grow 属性规定项目将相对于同一容器内其他灵活的项目进行扩展的量。number 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。initial 设置该属性为它的默认值。inherit 从父元素继承该属性。#div{display: flex; }#div1{ height:20px; background:#FF0; border:solid 1px #F00; flex:1;}#div2{ height:20px; background:#FF0; border:solid 1px #F00; flex-grow:3}#div3{ height:20px; background:#FF0; border:solid 1px #F00; flex:1}7flex-basis 属性规定灵活项目的初始长度。number 一个长度单位或者一个百分比，规定灵活项目的初始长度。auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。initial 设置该属性为它的默认值inherit 从父元素继承该属性。#div{display: flex; }#div1{ height:20px; background:#FF0; border:solid 1px #F00; flex:1;}#div2{ height:20px; background:#FF0; border:solid 1px #F00; flex:1;}#div3{ height:20px; background:#FF0; border:solid 1px #F00; flex-basis: 80px;}8order:定义项目的排列顺序，数字越小，越靠前，默认为0.#div{display: flex; }#div1{ height:20px; background:#FF0; border:solid 1px #F00; flex:1;}#div2{ height:20px; background:#FF0; border:solid 1px #F00; flex:1;}#div3{ height:20px; background:#FF0; border:solid 1px #F00; order:1;}9align-content 堆栈伸缩行（结合flex-wrap，flex-flow使用）stretch 默认值。项目被拉伸以适应容器。 center 项目位于容器的中心。flex-start 项目位于容器的开头。flex-end 项目位于容器的结尾。space-between 项目位于各行之间留有空白的容器内。 space-around 项目位于各行之前、之间、之后都留有空白的容器内。#div{ display:flex;flex-wrap: wrap; align-content: space-between; height:200px; width:240px; background:#666;}#div1{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}#div2{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}#div3{ height:30px; background:#FF0; border:solid 1px #F00; width:100px;}html同上10flex-flow：设置或检索伸缩盒对象的子元素排列方式（复合属性）[ flex-direction ]：定义弹性盒子元素的排列方向。[ flex-wrap ]：定义弹性盒子元素溢出父容器时是否换行。#div{ display:flex; flex-flow:column-reverse wrap; width:404px; height:150px; background:#666;}#div1{ height:30px; background:#FF0; border:solid 1px #F00; width:200px; /*order:2*/}#div2{ height:30px; background:#FF0; border:solid 1px #F00; width:200px; /*order:1*/}#div3{ height:30px; background:#FF0; border:solid 1px #F00; width:200px; /*order:0*/}11flex-shrink：设置或检索弹性盒的收缩比率，默认值是 0。父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化a,b,c将按照1:1:3来分配200px，计算后即可得40px,40px,120pxa,b,c各需要消化40px,40px,120px，那么就需要用原定义的宽度相减这个值，最后得出a为160px，b为160px，c为80pxdisplay:-webkit-box ，display:flex; 伸缩盒模型 - 笑看花开 - 帝都捡破烂的#div{display: flex; width:400px;}#div1{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; }#div2{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; }#div3{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; flex-shrink:3;}12align-self：设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 stretch 元素被拉伸以适应容器。 center 元素位于容器的中心。 flex-start 元素位于容器的开头。 flex-end 元素位于容器的结尾。 baseline 元素位于容器的基线上。#div{display:flex; align-items: flex-end; height:100px;}#div1{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; align-self: flex-end;}#div2{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; align-self: center;}#div3{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; align-self: flex-start;}#div4{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; align-self: baseline;}#div5{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; align-self: stretch;}#div6{ height:20px;width:200px; background:#FF0; border:solid 1px #F00; align-self: auto;}