display: flex/inline-flex示例

参考资料

1. css文字阴影属性
2. css中div居中
3. display: flex/inline-flex示例
4. 有没有推荐的 CSS 过渡动画库？
5. css阴影颜色怎么设置
6. 背景属性详细说明以及案例
7. css div内容居中
8. flex-direction: row/column示例

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

1. 示例

<!-- Flex 示例 -->
<div style="display: flex;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Inline-flex 示例 -->
<div style="display: inline-flex;">
  <div>Item A</div>
  <div>Item B</div>
</div>

2. 用法

• flex: 块级弹性容器，独占一行

• inline-flex: 行内弹性容器，与其他元素共享一行

常用属性：

.container {
  display: flex | inline-flex;
  flex-direction: row | column;
  justify-content: flex-start | center | space-between;
  align-items: flex-start | center;
}
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

3. 安装

不需要安装，Flexbox 是 CSS3 原生支持的功能，现代浏览器均内置支持。只需在 CSS 中直接使用即可。

浏览器支持：

• 所有现代浏览器（Chrome、Firefox、Safari、Edge）

• IE10+（部分属性需要前缀）

• 移动端浏览器全面支持

如需兼容旧版浏览器，可添加前缀：

.container {
  display: -webkit-box; /* 旧版 Safari/iOS */
  display: -ms-flexbox; /* IE10 */
  display: flex; /* 标准语法 */
}