Flexbox、Grid 布局、动画等新特性（个人学习向）

1. Flexbox

定义： Flexbox（弹性盒子布局）是一种一维布局模型，用于在容器内分配空间并对齐项目。

主要特性：

• 主轴和交叉轴：

  • 主轴是 Flexbox 布局中主要的方向（水平或垂直），而交叉轴是与主轴垂直的方向。

• 容器属性：

  • display: flex;：将元素设为 Flex 容器。
  • flex-direction：定义主轴的方向（row, column, row-reverse, column-reverse）。
  • justify-content：定义主轴上的对齐方式（flex-start, flex-end, center, space-between, space-around）。
  • align-items：定义交叉轴上的对齐方式（flex-start, flex-end, center, baseline, stretch）。
  • flex-wrap：定义是否换行（nowrap, wrap, wrap-reverse）。

• 项目属性：

  • flex-grow：定义项目的放大比例。
  • flex-shrink：定义项目的缩小比例。
  • flex-basis：定义项目的初始大小。
  • align-self：允许单个项目在交叉轴上设置对齐方式。

示例：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

.item {
  flex: 1; /* 自动填充空间 */
}

2. Grid 布局

定义： Grid 布局是一种二维布局模型，可以同时处理行和列。

主要特性：

• 容器属性：

  • display: grid;：将元素设为 Grid 容器。
  • grid-template-columns：定义列的大小。
  • grid-template-rows：定义行的大小。
  • grid-template-areas：定义布局区域。
  • gap 或 grid-gap：定义行和列之间的间距。

• 项目属性：

  • grid-column 和 grid-row：定义项目在网格中的位置和跨越的行/列数。
  • align-self：允许单个项目在交叉轴上设置对齐方式。
  • justify-self：允许单个项目在主轴上设置对齐方式。

示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列 */
  grid-gap: 10px; /* 网格间隙 */
}

.item {
  grid-column: 1 / 3; /* 从第一列到第二列 */
}

3. CSS 动画

定义： CSS 动画用于创建动态效果，使元素在页面上逐渐变化。

主要特性：

• 过渡（Transition）：

  • 通过设置 transition 属性，可以平滑过渡到新样式。

  示例：

  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.5s ease;
  }
  
  .box:hover {
    background-color: red;
  }
  

• 关键帧动画（Keyframes）：

  • 使用 @keyframes 定义动画的关键帧。

  示例：

  @keyframes example {
    from { background-color: blue; }
    to { background-color: red; }
  }
  
  .animated {
    width: 100px;
    height: 100px;
    animation: example 2s infinite;
  }