欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css flex

程序员文章站 2022-03-02 18:05:43
...

flex 应用

如果说写手机页面最常用的技术是什么,我认为是 flex,为了让内容自适应,等分,水平居中,垂直居中,我们都可以直接使用 flex 解决,事实上,它的表现跟 table 类似。
但 flex 麻烦的一点是需要写点兼容,因为它在成长的过程中,出现了不同的规范定义,造成现在不同系统对其支持的写法不一样,故麻烦了一点,这里当成代码片段总结一下。

1. 等分

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

2. 水平居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}

3. 垂直居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}