CSS布局学习2

flex布局中span会改变行为

在使用 Flex 布局时，盒子中的子元素（如 span）会自动成为 Flex 项目，并参与 Flex 布局的计算。具体原因如下：

Flex 容器：当一个元素设置为 display: flex; 时，它会变成一个 Flex 容器。
Flex 项目：Flex 容器内的所有直接子元素都会自动成为 Flex 项目，无论它们是什么标签（如 div、span 等）。
布局规则：这些 Flex 项目会根据 Flex 布局的规则进行排列和对齐，例如 justify-content、align-items 等属性会影响它们的布局。
因此，即使 span 元素默认是内联元素，一旦它成为 Flex 项目的子元素，就会按照 Flex 布局的规则进行排列。

text-align是设置在父元素中

text-align 属性用于控制文本在其父元素内的水平对齐方式，但它只对块级元素内的内联元素有效。如果你发现 text-align 对 span 元素不生效，可能是因为以下原因：

块级元素：text-align 需要在块级元素上设置，才能影响其内部的内联元素（如 span）。
父元素：确保 text-align 是在 span 的父元素上设置的，而不是在 span 自身上设置。

flex布局通过space-between只设置两个元素实现两侧对齐

原文地址：https://blog.csdn.net/LeonNo11/article/details/143984277

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！