CSS Flexbox教程
封面图
•
2026-04-11
•
Html/Css
21
0
0
0
当然!下面是一个关于 **CSS Flexbox** 的详细教程,适合初学者和中级开发者。Flexbox 是一种用于布局的现代 CSS 技术,可以轻松地创建响应式和灵活的页面布局。 --- ## 🌟 什么是 Flexbox? Flexbox(Flexible Box)是一种一维布局模型,用于在网页中对容器内的子元素进行灵活排列。它非常适合处理水平或垂直方向上的对齐、分布、顺序等问题。 --- ## 🧩 基本概念 ### 1. **Flex Container(弹性容器)** - 使用 `display: flex;` 或 `display: inline-flex;` 来定义一个容器为 Flex 容器。 - 所有直接子元素都会成为 Flex Item(弹性项目)。 ```css .container { display: flex; } ``` ### 2. **Flex Item(弹性项目)** - 容器中的子元素(直接子元素)。 - 可以通过 Flexbox 属性控制它们的排列方式。 --- ## 📐 主要属性 ### ✅ 容器属性(Flex Container Properties) | 属性 | 说明 | |------|------| | `display` | 设置容器为 Flex 容器 | | `flex-direction` | 设置主轴方向(row, row-reverse, column, column-reverse) | | `flex-wrap` | 设置是否换行(nowrap, wrap, wrap-reverse) | | `justify-content` | 主轴上的对齐方式(flex-start, flex-end, center, space-between, space-around) | | `align-items` | 交叉轴上的对齐方式(flex-start, flex-end, center, baseline, stretch) | | `align-content` | 多行时的交叉轴对齐方式(与 justify-content 类似) | ### ✅ 项目属性(Flex Item Properties) | 属性 | 说明 | |------|------| | `flex-grow` | 项目在空间不足时的扩展比例 | | `flex-shrink` | 项目在空间不足时的收缩比例 | | `flex-basis` | 项目在主轴上的初始大小 | | `flex` | 简写属性:`flex-grow`, `flex-shrink`, `flex-basis` | | `order` | 项目排列顺序(数值越小越靠前) | | `align-self` | 单个项目在交叉轴上的对齐方式(覆盖 `align-items`) | --- ## 🧪 示例代码 ### 示例 1:基本布局 ```html <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> ``` ```css .container { display: flex; justify-content: space-between; align-items: center; height: 100px; border: 1px solid #ccc; } .item { width: 50px; height: 50px; background-color: lightblue; margin: 5px; } ``` ### 示例 2:垂直居中 ```css .container { display: flex; align-items: center; justify-content: center; height: 200px; } ``` ### 示例 3:多行布局 ```css .container { display: flex; flex-wrap: wrap; gap: 10px; } .item { flex: 1 1 200px; /* grow shrink basis */ } ``` --- ## 🔄 常见用法场景 | 场景 | 说明 | |------|------| | 导航栏 | 水平排列导航项,自动调整间距 | | 对齐内容 | 实现垂直/水平居中 | | 响应式布局 | 自动换行,适应不同屏幕尺寸 | | 动态内容 | 根据内容自动调整宽度和高度 | --- ## ⚠️ 注意事项 - Flexbox 是一维布局,不适合复杂的二维布局(如表格)。 - `flex-direction` 默认是 `row`(从左到右),可以通过设置 `column` 改变方向。 - `align-items` 默认是 `stretch`,即拉伸项目填满容器高度。 --- ## 📘 学习资源推荐 - [MDN Web Docs - Flexbox](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout) - [CSS-Tricks - A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-complete-guide-to-flexbox/) - [W3Schools - Flexbox](https://www.w3schools.com/css/css3_flexbox.asp) --- 如果你需要更详细的某个属性讲解,或者想看实际应用案例,欢迎继续问我 😊 你也可以告诉我你想要实现的具体效果,我可以帮你写出对应的 Flexbox 代码。
上一篇:
css核心教程
下一篇:
CSS Grid教程
标题录入,一次不能超过6条
留言
评论