CSS中flex和inline-flex的区别详解

1. flex和inline-flex介绍

flex布局是一种网页布局方式，可以方便地实现页面中元素的对齐、宽高自适应等功能，通常用来代替浮动布局和定位布局。inline-flex 和 flex 样式是非常相似的，唯一的区别在于一个是块级元素，一个是行内元素。

2. flex和inline-flex的差异

2.1 布局区别

flex 布局的子元素会按照主轴的方向依次排列，每个元素可以根据自己的尺寸和排列方向自动调整自己的位置和尺寸。inline-flex 布局和 flex 布局的本质相同，只是在外围多包裹了一个 display:inline 的元素，使得整个 flex 布局变成行内元素，这样可以和其他行内元素进行混合布局。

/* flex布局 */

.container {
  display: flex;
}
/* inline-flex布局 */
.container {
  display: inline-flex;
}

2.2 默认宽度区别

flex 的默认宽度是 100%，可以设置宽度和高度，而 inline-flex 的默认宽度和高度是根据内容来自适应的。

/* 设置 flex 元素宽度为 200px */

.container {
  display: flex;
}
.item {
  width: 200px;
}
/* 设置 inline-flex 元素宽度为 200px */
.container {
  display: inline-flex;
}
.item {
  width: 200px;
}

2.3 用途区别

flex 更适合于新建一个布局容器，用于布局内容，而 inline-flex 更适合于把一些行内元素放进一个布局容器中进行排布。

3. 实例演示

下面是一个简单的例子，展示了使用两种不同的布局方式实现相同效果的情况。

3.1 flex布局实例

/* flex布局 */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #f44336;
  margin: 20px;
}

3.2 inline-flex布局实例

/* inline-flex布局 */

.container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #f44336;
  margin: 20px;
}