displayinlineblock和flex布局的区别
display： inline-block和flex布局在元素排列、对齐方式、空间分配和顺序调整等方面存在明显的区别。元素排列方式：display： inline-block的元素会在同一行内显示，直到行末才会换行 。相比之下，flex布局的子元素默认沿着主轴（默认为水平方向）排列 ，当主轴空间不足时 ，会自动换行到下一行 。
display： inline与display： inline-flex的核心区别在于内部布局机制：前者子元素按自身属性排列，后者强制子元素成为弹性项目并受Flexbox控制；两者外部均表现为行内元素 ，但内部行为截然不同。外部表现（共同点）行内流特性：两者均不会独占一行 ，允许其他行内元素或文本紧随其后 。
display：inline-flex：使元素成为内联块级弹性伸缩盒，继承inline-block属性 ，同样是最新版本的伸缩盒 。这些属性的区别在于它们对元素布局和行为的不同影响 ，选取合适的display属性可以更好地控制页面布局。弹性伸缩盒是一种强大的布局工具，能够提供更灵活的布局方式 。
布局方式：display： inlineblock：使元素按照行内元素的方式显示 ，但可以调整大小 。display： flex：支持弹性盒子布局 ，能更灵活地调整元素在父元素中的位置和大小。文本对齐：使用textalign： center可以将块元素或单元格框内的内容水平居中 。此外，textalign还可以设置元素向左 、居中 、向右对齐来调整布局 。
示例：button { display： inline-block； width： 100px； } none 隐藏元素：元素不占据空间 ，完全从渲染树中移除。与 visibility： hidden 的区别：后者保留元素空间 。示例：.hidden { display： none； } flex 弹性布局：子元素自动调整大小和位置 ，适应容器（如导航栏、卡片布局） 。
