CSS3 弹性盒子

news2025/1/14 2:53:48

CSS3 弹性盒子

介绍

CSS3 弹性盒子（Flexbox）是一种用于布局设计的强大工具。它提供了一种更加高效的方式来对容器内的子元素进行排列、对齐和分配空间。Flexbox 的设计目标是提供一种统一的布局模型，能够适应不同屏幕尺寸和设备类型，同时简化布局流程。

弹性盒子模型

在 Flexbox 中，容器（container）和项目（item）是两个核心概念。容器是包含项目的元素，而项目是容器的直接子元素。通过设置容器的 CSS 属性，可以控制项目的布局行为。

容器属性

display: 设置容器的布局模式，如 flex 或 inline-flex。
flex-direction: 定义项目的排列方向，如 row、column、row-reverse 或 column-reverse。
flex-wrap: 定义项目是否可以在容器中换行，如 nowrap、wrap 或 wrap-reverse。
flex-flow: 是 flex-direction 和 flex-wrap 的简写形式。
justify-content: 定义项目在主轴上的对齐方式，如 flex-start、flex-end、center、space-between 或 space-around。
align-items: 定义项目在交叉轴上的对齐方式，如 flex-start、flex-end、center、baseline 或 stretch。
align-content: 定义多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用。

项目属性

order: 定义项目的排列顺序，数值越小，排列越靠前。
flex-grow: 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-shrink: 定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis: 定义在分配多余空间之前，项目占据的主轴空间，默认值为 auto。
flex: 是 flex-grow、flex-shrink 和 flex-basis 的简写形式。
align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

实例

以下是一个简单的 Flexbox 布局实例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      background-color: lightgray;
    }

    .item {
      margin: 10px;
      padding: 20px;
      background-color: coral;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个例子中，我们创建了一个 Flexbox 容器，并设置了三个项目。容器内的项目将沿着主轴居中对齐，并在交叉轴上居中对齐。每个项目之间有 10px 的外边距，并且有 20px 的内边距。