display flex inline-block区别

display属性用于定义一个元素的显示方式。flex和inline-block是display属性的两个可选值，它们之间有一些区别。

1. flex布局：
- flex布局是一种弹性盒子布局模型，通过设置容器的display属性为flex，可以将其内部的子元素按照一定的规则进行排列。
- flex容器的子元素可以通过设置flex属性来调整它们的宽度和高度比例，以实现灵活的布局。
- flex布局适用于构建响应式的、自适应的布局，可以轻松实现水平和垂直居中等效果。

2. inline-block布局：
- inline-block布局是一种将元素显示为内联块级元素的布局方式。
- inline-block元素会在一行内显示，并且可以设置宽度、高度、内边距和外边距等属性。
- inline-block元素的宽度由内容决定，默认情况下会将元素的宽度设置为其内容的宽度。
- inline-block布局适用于一些需要在一行内显示并且可以设置宽高的元素，比如多个按钮水平排列等。

总结：
- flex布局适用于构建复杂的、自适应的布局，可以实现更多的布局效果。
- inline-block布局适用于简单的、在一行内显示的元素，可以设置宽高等属性。

需要注意的是，使用flex布局时，容器的display属性必须设置为flex，而使用inline-block布局时，元素的display属性必须设置为inline-block。