html伸缩布局,CSS3伸缩布局（⼀）
CSS3引⼊了⼀种新的布局模式——Flexbox布局，即伸缩布局盒模型(Flexible Box)，⽤来提供⼀个更加有效的⽅式制定、调整和分布⼀个容器⾥项⽬布局，即使它们的⼤⼩是未知或者动态的，这⾥简称为Flex。
Flexbox布局常⽤于设计⽐较复杂的页⾯，可以轻松的实现屏幕和浏览器窗⼝⼤⼩发⽣变化时保持元素的相对位置和⼤⼩不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的⼤⼩。
Flexbox布局在定义伸缩项⽬⼤⼩时伸缩容器会预留⼀些可⽤空间，让你可以调节伸缩项⽬的相对⼤⼩和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项⽬，当然，如果你的伸缩容器没有⾜够⼤的空间放置伸缩项⽬时，浏览器会根据⼀定的⽐例减少伸缩项⽬的⼤⼩，使其不溢出伸缩容器。综合⽽⾔，Flexbox布局功能主要具有以下⼏点：
第⼀，屏幕和浏览器窗⼝⼤⼩发⽣改变也可以灵活调整布局；
第⼆，可以指定伸缩项⽬沿着主轴或侧轴按⽐例分配额外空间(伸缩容器额外空间)，从⽽调整伸缩项⽬的⼤⼩；
第三，可以指定伸缩项⽬沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项⽬之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；flex布局对齐方式
第五，可以控制元素在页⾯上的布局⽅向；
第六，可以按照不同于⽂档对象模型(DOM)所指定排序⽅式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照⽂档流先后顺序重排伸缩项⽬顺序。
Flexbox规范版本众多，浏览器对此语法⽀持度也各有不同，接下来的内容以最新语法版本为例向⼤家展⽰：
1.创建⼀个flex容器
任何⼀个flexbox布局的第⼀步是需要创建⼀个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit，
.flexcontainer{ display: -webkit-flex; display: flex; }
2.Flex项⽬显⽰
Flex项⽬是Flex容器的⼦元素。他们沿着主要轴和横轴定位。默认的是沿着⽔平轴排列⼀⾏。你可以通过flex-direction来改变主轴⽅向修改为column，其默认值是row。
3.Flex项⽬列显⽰
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
4.Flex项⽬移动到顶部
如何实现将flex项⽬移动到顶部的效果，关键点：取决于主轴的⽅向。justify-content属性定义了项⽬在主轴上的对齐⽅式。align-items 属性定义项⽬在交叉轴上如何对齐。 如果主轴是⽔平的⽅向，通过align-items设置；如果主轴是垂直的⽅向，通过justify-content设置。
.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }
(未完待续，下⼀节)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。