当前位置：网站首页>本周随笔（周末整理）

本周随笔（周末整理）

2022-07-19 20:29:00 【godlike-icy】

display：inline-flex； align-items：center 可水平居中。
用于块状元素的属性对flex 容器不起作用
Flex 容器不是块级容器，因此一些专用于块状布局的属性，对Flex 布局不起作用。比如：

  1. column-* 多栏布局里的column-*属性

  2. float 和 clear 不能让弹性容器下的项目摆脱文档流，或清除浮动。

  3. vertical-align 垂直居中不起作用。（flex布局下，垂直居中更简单舒适：看我这里的一篇文章）

  4. 伪类元素 ::first-line 和 ::first-letter
    flex，inline-flex，inline-block 区别

flex： 将对象作为块级弹性伸缩盒显示。

inline-flex：将对象作为内联弹性伸缩盒显示。

inline-block: 将对象呈现为inline对象，但是对象的内容作为block对象呈现。

比如说，inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

那么，对于inline-block来说，margin和padding的垂直方向的边距，则会产生边距效果。

原网站

版权声明
本文为[godlike-icy]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43682422/article/details/125842405

边栏推荐

猜你喜欢

随机推荐