display: flex/inline-flex示例

参考资料

1. css阴影效果代码
2. CSS格式化/压缩有哪些
3. css让div居中的几种方法
4. 如何优化Flexbox布局的性能？
5. CSS网格详细说明以及案例
6. css3中设置阴影的属性是
7. css样式div居中
8. css实现阴影效果

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; /* 标准语法 */
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。