技术饭 css3弹性盒子：从浅到深了解flex布局（图解）

css3弹性盒子：从浅到深了解flex布局（图解），flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。

阅读全文 » 2509天前
2018年01月10日

技术饭 弹性盒子元素在侧轴（纵轴）方向上的对齐方式：align-items (适用于父类容器上)

弹性盒子元素在侧轴（纵轴）方向上的对齐方式：align-items (适用于父类容器上)，这个属性主要用于 display:flex 弹性盒子的时候子元素的排列，类型文本的 text-align:center，对于未来需要大量使用css3的应用还是很有用处的。

阅读全文 » 2514天前
2018年01月05日

技术饭 解决css3中 :first-child 有时候不起作用

解决css3中 :first-child 有时候不起作用，平时在写css3的时候没有注意伪类 :first-child、:last-child的作用域，一直会搞混淆了，:first-child 官方给的定义是：选择器用于选取属于其父元素的首个子元素的指定选择器。同理 :last-child 就是其父元素之类的最后一个子元素了。

阅读全文 » 2514天前
2018年01月05日