display inlineblock和flex

display:inline-block和display:flex都是CSS中用于设置元素的布局方式的属性。

display:inline-block用于将元素呈现为行内块级元素，即在同一行内显示，并具有块级元素的特性。它允许元素设置宽度和高度，并且可以设置margin和padding等属性。使用display:inline-block时，元素之间会存在默认的空白间距，可以通过设置父元素的font-size为0，或者给子元素设置负的margin值来消除空白间距。

例如：

<div class="box">Inline Block</div>
<div class="box">Inline Block</div>

<style>
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
}
</style>

上述代码会将两个div元素水平排列在同一行，并且宽度为100px，高度为100px。

display:flex用于创建弹性布局容器，使其子元素能够灵活地伸缩和对齐。flex容器可以通过设置flex-direction、justify-content、align-items等属性来控制子元素的排列方式和对齐方式。它是响应式布局的一种常用方式，适用于创建复杂的布局结构。

例如：

<div class="container">
  <div class="box">Flex Item 1</div>
  <div class="box">Flex Item 2</div>
  <div class="box">Flex Item 3</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
}
</style>

上述代码会将三个div元素水平居中排列，并且宽度为100px，高度为100px。

总结：
display:inline-block适用于水平排列的行内块级元素布局，display:flex适用于创建复杂的弹性布局。根据实际需要选择合适的布局方式。