参考资料

1. CSS 阴影边框设置
2. css阴影颜色怎么设置
3. flex-wrap: wrap/nowrap详细说明
4. 详细说明：justify-content: flex-start/end
5. css中设置div居中
6. 如何优化Flexbox布局的性能？
7. CSS 阴影设置
8. 多重选择器详细说明以及案例

display: flex/inline-flex示例

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 等工具自动处理。