弹性盒子

CSS3 的弹性盒子是一种强大的布局方式，它提供了一种更加高效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。

Flex 容器

display 属性

设置元素为 flex 容器。

/* Flex 容器 */
.flex-container {
  display: flex;
}

/* 内联 Flex 容器 */
.inline-flex {
  display: inline-flex;
}

flex-direction 属性

设置主轴的方向。

/* 行方向（默认） */
.row {
  flex-direction: row;
}

/* 行方向（反向） */
.row-reverse {
  flex-direction: row-reverse;
}

/* 列方向 */
.column {
  flex-direction: column;
}

/* 列方向（反向） */
.column-reverse {
  flex-direction: column-reverse;
}

flex-wrap 属性

设置 flex 项目是否换行。

/* 不换行（默认） */
.nowrap {
  flex-wrap: nowrap;
}

/* 换行 */
.wrap {
  flex-wrap: wrap;
}

/* 反向换行 */
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

flex-flow 属性

flex-flow 是 flex-direction 和 flex-wrap 的简写属性。

/* 简写 */
.flex-flow {
  flex-flow: row wrap;
}

/* 列方向换行 */
.column-wrap {
  flex-flow: column wrap;
}

Flex 项目

flex-grow 属性

设置 flex 项目在容器中的放大比例。

/* 不放大（默认） */
.no-grow {
  flex-grow: 0;
}

/* 平均分配 */
.equal-grow {
  flex-grow: 1;
}

/* 不同比例 */
.different-grow {
  flex-grow: 2;
}

flex-shrink 属性

设置 flex 项目在容器中的缩小比例。

/* 不缩小 */
.no-shrink {
  flex-shrink: 0;
}

/* 正常缩小（默认） */
.normal-shrink {
  flex-shrink: 1;
}

/* 不同比例 */
.different-shrink {
  flex-shrink: 2;
}

flex-basis 属性

设置 flex 项目在主轴上的初始大小。

/* 自动（默认） */
.auto {
  flex-basis: auto;
}

/* 固定大小 */
.fixed {
  flex-basis: 200px;
}

/* 百分比 */
.percentage {
  flex-basis: 50%;
}

flex 属性

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性。

/* 简写 */
.flex {
  flex: 1;
}

/* 完整简写 */
.flex-complete {
  flex: 1 1 auto;
}

/* 固定大小 */
.flex-fixed {
  flex: 0 0 200px;
}

对齐方式

justify-content 属性

设置 flex 项目在主轴上的对齐方式。

/* 开始对齐 */
.flex-start {
  justify-content: flex-start;
}

/* 结束对齐 */
.flex-end {
  justify-content: flex-end;
}

/* 居中对齐 */
.center {
  justify-content: center;
}

/* 两端对齐 */
.space-between {
  justify-content: space-between;
}

/* 等间距 */
.space-around {
  justify-content: space-around;
}

/* 均匀分布 */
.space-evenly {
  justify-content: space-evenly;
}

align-items 属性

设置 flex 项目在交叉轴上的对齐方式。

/* 开始对齐 */
.flex-start {
  align-items: flex-start;
}

/* 结束对齐 */
.flex-end {
  align-items: flex-end;
}

/* 居中对齐 */
.center {
  align-items: center;
}

/* 基线对齐 */
.baseline {
  align-items: baseline;
}

/* 拉伸 */
.stretch {
  align-items: stretch;
}

align-self 属性

设置单个 flex 项目在交叉轴上的对齐方式。

/* 开始对齐 */
.self-start {
  align-self: flex-start;
}

/* 结束对齐 */
.self-end {
  align-self: flex-end;
}

/* 居中对齐 */
.self-center {
  align-self: center;
}

/* 拉伸 */
.self-stretch {
  align-self: stretch;
}

align-content 属性

设置多行 flex 项目在交叉轴上的对齐方式。

/* 开始对齐 */
.content-start {
  align-content: flex-start;
}

/* 结束对齐 */
.content-end {
  align-content: flex-end;
}

/* 居中对齐 */
.content-center {
  align-content: center;
}

/* 两端对齐 */
.content-between {
  align-content: space-between;
}

/* 等间距 */
.content-around {
  align-content: space-around;
}

/* 均匀分布 */
.content-evenly {
  align-content: space-evenly;
}

/* 拉伸 */
.content-stretch {
  align-content: stretch;
}

实际应用案例

1. 居中布局

/* 水平垂直居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 垂直居中 */
.vertical-center {
  display: flex;
  align-items: center;
  height: 100vh;
}

/* 水平居中 */
.horizontal-center {
  display: flex;
  justify-content: center;
}

2. 导航栏

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

.navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-nav li {
  margin-right: 20px;
}

.navbar-nav a {
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.navbar-nav a:hover {
  background: #f8f9fa;
  color: #007bff;
}

3. 卡片布局

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

4. 响应式布局

/* 响应式容器 */
.responsive-container {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex: 0 0 250px;
  background: #f8f9fa;
  padding: 20px;
}

.main-content {
  flex: 1 1 auto;
  padding: 20px;
}

@media (max-width: 768px) {
  .sidebar {
    flex: 1 1 100%;
  }
}

5. 等高列

/* 等高列容器 */
.equal-height {
  display: flex;
  align-items: stretch;
}

.equal-height > div {
  flex: 1;
  padding: 20px;
  background: white;
  border: 1px solid #e9ecef;
}

高级技巧

1. Holy Grail 布局

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail-header {
  background: #007bff;
  color: white;
  padding: 20px;
}

.holy-grail-body {
  display: flex;
  flex: 1;
}

.holy-grail-sidebar-left {
  flex: 0 0 200px;
  background: #f8f9fa;
  padding: 20px;
}

.holy-grail-content {
  flex: 1;
  padding: 20px;
}

.holy-grail-sidebar-right {
  flex: 0 0 200px;
  background: #f8f9fa;
  padding: 20px;
}

.holy-grail-footer {
  background: #6c757d;
  color: white;
  padding: 20px;
}

2. 媒体对象

.media-object {
  display: flex;
  align-items: center;
}

.media-object-image {
  flex: 0 0 100px;
  margin-right: 20px;
}

.media-object-image img {
  width: 100%;
  border-radius: 8px;
}

.media-object-content {
  flex: 1;
}

.media-object-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.media-object-description {
  color: #6c757d;
  line-height: 1.6;
}

3. 表单布局

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.form-group {
  flex: 1 1 200px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

4. 仪表板布局

.dashboard {
  display: flex;
  min-height: 100vh;
}

.dashboard-sidebar {
  flex: 0 0 250px;
  background: #2c3e50;
  color: white;
  padding: 20px;
}

.dashboard-content {
  flex: 1;
  padding: 20px;
  background: #f8f9fa;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.dashboard-card {
  flex: 1 1 300px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

浏览器兼容性

CSS3 Flexbox 在所有现代浏览器中都有良好的支持：

• Chrome 29+, Firefox 28+, Safari 9+, Edge 12+, IE 11+

最佳实践

1. 合理使用 flexbox

/* 推荐 - 使用 flexbox 进行布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 不推荐 - 使用 float 进行布局 */
.container {
  float: left;
}

2. 优化性能

/* 推荐 - 优化性能 */
.container {
  display: flex;
  will-change: transform;
}

/* 不推荐 - 影响性能 */
.container {
  display: flex;
  animation: slide 0.5s ease;
}

3. 提供降级方案

/* 推荐 - 提供降级方案 */
.container {
  display: block;
}

@supports (display: flex) {
  .container {
    display: flex;
  }
}

/* 不推荐 - 不提供降级方案 */
.container {
  display: flex;
}

4. 考虑可访问性

/* 推荐 - 考虑可访问性 */
.container {
  display: flex;
  flex-direction: column;
}

/* 不推荐 - 不考虑可访问性 */
.container {
  display: flex;
  flex-direction: row-reverse;
}

总结

CSS3 弹性盒子提供了强大的布局能力：

容器属性：

• display：flex 容器
• flex-direction：主轴方向
• flex-wrap：换行控制
• flex-flow：方向和换行简写
• justify-content：主轴对齐
• align-items：交叉轴对齐
• align-content：多行对齐

项目属性：

• flex-grow：放大比例
• flex-shrink：缩小比例
• flex-basis：初始大小
• flex：简写属性
• align-self：单独对齐

实际应用：

• 居中布局
• 导航栏
• 卡片布局
• 响应式布局
• 等高列

最佳实践：

• 合理使用 flexbox
• 优化性能
• 提供降级方案
• 考虑可访问性
• 保持代码简洁

优势：

• 简化布局代码
• 提高响应性
• 减少嵌套
• 改善对齐
• 优化性能

注意事项：

• 浏览器兼容性
• 性能影响
• 可访问性
• 用户体验
• 过度使用

掌握 CSS3 弹性盒子，能够让我们创建更加灵活和高效的布局，大大提升网页的布局能力和响应性。