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 弹性布局：子元素自动调整大小和位置，适应容器（如导航栏 、卡片布局） 。
