display: flex/inline-flex示例

参考资料

1. css阴影效果怎么设置
2. css中div居中详细说明
3. flex-direction: row/column
4. CSS3 阴影
5. css阴影效果代码
6. Flexbox 布局有哪些高级用法？
7. 如何调试Flex布局问题？
8. css div居中对齐方式

display: flex/inline-flex 示例、用法、安装

1. 示例

Flex 示例:

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: lightblue;
}

Inline-Flex 示例:

<span class="inline-flex-container">
  <span class="item">A</span>
  <span class="item">B</span>
</span>

.inline-flex-container {
  display: inline-flex;
  gap: 10px;
}
.item {
  padding: 5px;
  background: lightcoral;
}

2. 用法

• Flex：块级弹性容器，独占一行。

• Inline-Flex：行内弹性容器，与其他行内元素共处一行。

常用属性：

• justify-content：主轴对齐方式（如 flex-start, center, space-between）。

• align-items：交叉轴对齐方式（如 stretch, center）。

• flex-direction：主轴方向（如 row, column）。

• flex-wrap：是否换行（如 nowrap, wrap）。

3. 安装

无需安装，直接在现代浏览器中使用。如需兼容旧版浏览器：

• 添加前缀（如 -webkit-flex）。

• 使用 Autoprefixer 等工具自动处理。