有关CSS flex 属性错位问题，以及css flex使用学习

使用css flex时出现漂移问题

在H5+CSS3的开发中，我们经常会实用弹性布局来进行页面的布局。

在谷歌内核的浏览器中的代码示例：

display: -webkit-box;

-webkit-box-flex: 1;

 

经常使用到的该属性常用为两种情况：

1、子元素之间的等比例空间分配；

2、子元素所占剩余空间分配；

 

此博文只分析第二种剩余空间分配的情况，一种是水平剩余空间，一种是垂直剩余空间；

此页面中，下方黄色div占据了除了红绿色部分以外的所有剩余空间；

 

红黄绿部分父级div 所使用的css为

display: -webkit-box;

height: 600px;

width: 400px;

-webkit-box-orient:vertical;

 

黄色部分div 所使用的css为

display: -webkit-box;

-webkit-box-flex: 1;

background: yellow;

 

注意：此时红绿色 部分高度是固定的，想要元素占据剩余页面所有的空间，仅仅使用flex：1;是无效的，必须加上display:-webkit-box;以及-webkit-box-orient:vertical;

display:-webkit-box;默认子元素排列为水平排列;

因此垂直，则必须使用-webkit-box-orient:vertical;

 

否则，效果如下图：

 

 

水平剩余空间和垂直类似

-webkit-box-orient:horizontal;

或者不适用orient 属性，使子元素默认排列

如下图所示：

左边红色块占用的空间，右侧宽度固定

代码为：

.box1{

display: -webkit-box;

-webkit-box-flex: 1;

background: red;

}

.box2{

display: -webkit-box;

width: 100px;

background: green;

}

 

 

 

下图为左右1：1等比分配

.box1{

display: -webkit-box;

-webkit-box-flex: 1;

background: red;

}

.box2{

display: -webkit-box;

-webkit-box-flex: 1;

background: green;

}

注意：此情况只适用于内容长度一致，

如果内容长度不一致，两个div要设置一样的任意宽度--如：width:1px;

 

 

转载于:https://www.cnblogs.com/wlqh/p/6100373.html