Flex布局制作自适应页面--语法与案例

.box{display:flex;显示：-webkit-flex；/*水平方向，左对齐*/flex-direction:row;/*水平方向，右对齐*//*flex-direction:row-reverse;*//*垂直方向，顶对齐*//*flex-direction:column;*//*垂直方向，底对齐*//*flex-direction:column-reverse;*/background:#999;宽度：100%；}.box跨度{边距：10px10px；填充：10px；背景：#ff0；宽度：50px;}本文发表于：github项目地址：https://github.com/tenadolant...SegmentFault地址：https://segmentfault.com/a/11。..CSDN地址：http://blog.csdn.net/qq_34648...博客园地址：http://www.cnblogs.com/zhanai...Flex布局介绍Flex英文是flexiblebox，翻译为弹性盒子，flex布局就是弹性布局。Flex布局为盒子模型提供了很大的灵活性。任何容器都可以指定为弹性布局。设置方法为：.box{display:flex;}内联元素使用flexlayout.box{display:inline-flex;}以webkit为核心的浏览器必须加上webkit前缀。盒子{显示：弹性；display:-webkit-flex;}注意：使用Flex布局后，里面的float、clear、vertical-align属性将失效。弹性布局中的基本概念是采用弹性布局的元素，称为弹性容器（flexcontainer），简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。默认情况下，容器有两个轴：水平主轴和垂直交叉轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；侧轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单品占据的主轴空间称为主尺寸，侧轴占据的空间称为交叉尺寸。属性1、flex-direction2、flex-wrap3、flex-flow4、justify-content5、align-items6、align-content1、容器的flex-direction设置item的排列方向，默认为rowflex-direction：row|行反转|栏目|column-reverse当设置为flex-direction:row时，效果：当设置为flex-direction:row-reverse时，效果：当设置为flex-direction:column时，效果：当设置为flex-direction:column-reverse时，效果：直接复制以下代码保存为html文件，查看效果：.box{display:flex;显示：-webkit-flex；/*水平方向，左对齐*/flex-direction:row;/*水平方向，右对齐*//*flex-direction:row-reverse;*//*垂直方向，顶对齐*//*flex-direction:column;*//*垂直方向，底对齐*//*flex-direction:column-reverse;*/background:#999;宽度：100%；}.box跨度{边距：10px10px；填充：10px；背景：#ff0；宽度：50px;}你好1你好2你好3你好4span>