display: flex/inline-flex示例

参考资料

1. CSS有哪些常用的选择器？
2. CSS字体属性详细说明以及案例
3. Flexbox 布局有哪些高级用法？
4. CSS响应式详细说明以及案例
5. 子选择器详细说明以及案例
6. CSS阴影透明度设置
7. css布局格式
8. CSS 阴影效果属性

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

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