weui.css中flex容器下子项目的水平和垂直居中
想用weui.css写微信平台的页面,发现没有让flex(weui-flex)容器下,子项目(weui-flex__item)居中的类。
百度了一下,是用justify-content:center;实现水平居中,用align-items:center 实现垂直居中。
可是当我这样写的时候,竟然没有用!
<!-- style -->
<style>
.justify{
justify-content: center;
}
.align{
align-items: center;
}
</style>
<!-- HTML -->
<div class="weui-flex justify">
<div class="weui-flex__item">
<p>AAAA</p>
</div>
<div class="weui-flex__item">
<p>BBBB</p>
</div>
</div>
页面效果是这样的:
页面style是这样的:
注意! 这里的 div{display:block;}
------------------以上为初次尝试结果,下面说一下正确结果及上面无法实现的原因--------------------
当我不使用 weui-flex__item 来实现子项目等分空间,而是使用width来控制时,发生了这样一幕:
-----代码-----
<!-- style -->
<style>
.justify{
justify-content: center;
}
.align{
align-items: center;
}
.wid{
width: 100px;
height: 5em;
}
</style>
<!-- html -->
<div class="weui-flex justify">
<div class="wid">
<p>AAAA</p>
</div>
<div class="wid">
<p>BBBB</p>
</div>
</div>
<div class="weui-flex justify">
<p class="wid" style="background: red;">11111</p>
<p class="wid" style="background: blue;">22222</p>
</div>
<div class="weui-flex justify">
33333
</div>
-----页面效果-----
-----页面style-----
外层div-
-
子元素 p
总结发现:display: flex; 只对自身起作用,子元素依旧是 display: block;
当flex-direction:row时justify-content: center;(垂直居中),align-items: center;(水平居中)
而这里justify-content: center;(水平居中) align-items: center;(垂直居中) ,
这里之所以和网上的说法相反,是因为weui中的flex-direction的属性值设置为column了,
要作用在 display属性为flex的标签上才会对其子元素起作用(只有子元素,孙子都不好使)。
而我们还像用 flex:1来实现等分,那么就出现了我最后的结果。关于flex:1,看这里。
写在一起。
上代码
<style>
.justify{
justify-content: center;
}
.align{
align-items: center;
}
.wid{
height: 5em;
}
</style>
<div class="weui-flex">
<div class="weui-flex__item weui-flex justify align">
<p>AAAA</p>
</div>
<div class="weui-flex__item weui-flex justify">
<p>BBBB</p>
</div>
</div>
页面效果
这里顺便写了一下垂直居中,如何实现一看便知。
垂直居中和水平居中效果的实现,关键就在于display,以及作用的范围是 display: flex; 的子节点(没孙子节点什么事)。
希望可以得到分享和指正。
weui.css中flex容器下子项目的水平和垂直居中的更多相关文章
- 前端知识点回顾之重点篇——CSS中flex布局
flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...
- css中flex布局
一.Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; ...
- css实现不定宽高的div水平、垂直居中
一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示. 兼容方面也一样拿IE来做比较,第二种方法IE ...
- 关于页面布局中,如何让一个div水平和垂直居中的五个方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- CSS中设置div垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css 中 div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css的flex布局调试
学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...
随机推荐
- Jqgrid学习(转载)
jqGrid API 全 JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做 ...
- --@angularJS--angular与BootStrap3的应用
angularJS与BootStrap3是最佳搭档. 1.Form.html: <!doctype html><html ng-app="UserInfoModule&qu ...
- js判断浏览器在PC中打开还是移动设备中打开
var browser = { versions: function () { va ...
- JavaScript 模拟装饰者模式
/** * 抽象coffee父类,其实可以不用的 */ function Coffee () {} Coffee.prototype.cost = function() { throw '实现这个方法 ...
- Objective-C处理动态类型函数集
-(BOOL) isKindOfClass:class-object 对象是不是class-object或其子类的实例-(BOOL) isMemberOfClass:class-object 对象是不 ...
- 使用AIR进行移动APP开发常见功能和问题(下)
1. Air如何判断android.ios 平台网络连接状态? Android,使用as3原生api: if(NetworkInfo.isSupported)//只有android支持 Networ ...
- 真分布式SolrCloud+Zookeeper+tomcat搭建、索引Mysql数据库、IK中文分词器配置以及web项目中solr的应用(1)
版权声明:本文为博主原创文章,转载请注明本文地址.http://www.cnblogs.com/o0Iris0o/p/5813856.html 内容介绍: 真分布式SolrCloud+Zookeepe ...
- jQuery 学习总结(上)
第二章:基础选择器 第三章:过滤性选择器 第四章:表单选择器 第五章:jQuery 操作DOM 第六章:jQuery 事件与应用 第七章:jQuery 实现ajax应用
- css3 3d初入门(一)
css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...
- .net 基础服务开源战略规划备忘录
公司现状 1. 技术人员水平限制: 基础研发人员技术细节,性能处理能力不足,技术视野不够开阔;甚至一些高可用,高性能方案的概念都未听闻,更别提发展方向和思路了,令人痛心. 2. 技术反馈渠道限制: 公 ...