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;}
上一篇: 获取SSM项目中所有的URL
下一篇: css的flex布局
推荐阅读
-
HTML5/CSS3 网页加载进度条的实现,下载进度条等经典案例
-
CSS全屏布局的5种方式_html/css_WEB-ITnose
-
应该怎样进一步学习写样式_html/css_WEB-ITnose
-
安利一篇自己大学以来的反思,希望看到此文的朋友们能有些感触_html/css_WEB-ITnose
-
div+css 水平居中 实现方法_html/css_WEB-ITnose
-
inline-block后margin失效的问题_html/css_WEB-ITnose
-
处理html解析问题_html/css_WEB-ITnose
-
html中标签的种类_html/css_WEB-ITnose
-
8个提高效率的CSS实用工具_html/css_WEB-ITnose
-
Codeforces Round #280 (Div. 2) B_html/css_WEB-ITnose