你的位置:首页 > 软件开发 > 网页设计 > 一劳永逸的搞定 flex 布局(转)

一劳永逸的搞定 flex 布局(转)

发布时间:2017-04-24 12:00:14
原文链接:https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb?utm_source=gold_browser_extension寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 ...

一劳永逸的搞定 flex 布局(转)

原文链接:https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb?utm_source=gold_browser_extension

寻根溯源话布局

一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐,然而很快就失望的发现 CSS 中并不存在 float: center 的写法,那么 text-align: centerverticle-align: center 是否可行呢?答案也是否定的。这两个属性只能用于行内元素,对于块级元素的布局是无效的。

网页布局没有进入 CSS 的时代,排版几乎是通过 table 元素实现的,在 table 的单元格里可以方便的使用 alignvalign 来实现水平和垂直方向的对齐,随着 Web 语义化的流行,这些写法逐渐淡出了视野,CSS 标准为我们提供了 3 种布局方式:标准文档流浮动布局定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求,比如实现水平居中可以使用 margin: 0 auto,实现水平垂直同时居中可以如下设置:

.dad {  position: relative;}.son {  position: absolute;  margin: auto;  top: 0;  right: 0;  bottom: 0;  left: 0;}

原标题:一劳永逸的搞定 flex 布局(转)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录