display:-webkit-flex

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

box-orient 子元素排列 horizontal | vertical | inline-axis | block-axis | inherit box-flex 兄弟元素之间比例，仅作一个系数 box-align box 排列 box-direction box 方向 box-flex-group 以组为单位的流体系数 box-lines
box-ordinal-group 以组为单位的子元素排列方向 box-pack flex 这个值让元素产生块级伸缩容器盒。 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> 3 header, 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> ---------------------------------------- 1 flex复合属性。设置或检索伸缩盒对象的子元素如何分配空间。 是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> 2 justify-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同上 3 align-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同上 4 flex-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同上 5 flex-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} 6 flex-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} 7 flex-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;} 8 order:定义项目的排列顺序，数字越小，越靠前，默认为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;} 9 align-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同上 10 flex-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*/} 11 flex-shrink：设置或检索弹性盒的收缩比率，默认值是 0。 父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化 a,b,c将按照1:1:3来分配200px，计算后即可得40px,40px,120px a,b,c各需要消化40px,40px,120px，那么就需要用原定义的宽度相减这个值，最后得出a为160px，b为160px，c为80px display:-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;} 12 align-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;}

转载于:https://my.oschina.net/zhuyingming/blog/678963