CSS Flex布局是一种强大而灵活的布局模型，它可以帮助我们轻松地创建响应式和可自适应的网页布局。Flex布局通过使用容器和项目之间的关系来实现灵活的布局。

  1. 容器属性：
    • display: flex;：将一个元素标记为Flex容器。
    • flex-direction: row | row-reverse | column | column-reverse;：设置Flex容器中项目的排列方向。
    • flex-wrap: nowrap | wrap | wrap-reverse;：定义Flex容器中项目的换行方式。
    • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;：设置Flex容器中项目在主轴上的对齐方式。
    • align-items: flex-start | flex-end | center | baseline | stretch;：定义Flex容器中项目在交叉轴上的对齐方式。
    • align-content: flex-start | flex-end | center | space-between | space-around | stretch;：设置Flex容器中多行项目在交叉轴上的对齐方式。

下面是一个示例代码，展示了如何应用Flex容器属性：

1
2
3
4
5
6
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
  1. 项目属性：
    • order: <integer>;：定义项目的排列顺序。
    • flex-grow: <number>;：设置项目的放大比例。
    • flex-shrink: <number>;：设置项目的缩小比例。
    • flex-basis: <length> | auto;：定义项目在主轴上的初始大小。
    • flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];：简写形式，用于设置flex-grow、flex-shrink和flex-basis的值。
    • align-self: auto | flex-start | flex-end | center | baseline | stretch;：设置单个项目在交叉轴上的对齐方式。

下面是一个示例代码，展示了如何应用Flex项目属性：

1
2
3
4
5
6
7
.item {
  order: 2;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
  align-self: center;
}

Flex布局是一种强大的工具，可以轻松地创建各种布局。通过灵活地使用容器属性和项目属性，我们可以实现自适应、响应式的网页布局。无论是构建简单的导航栏还是复杂的网格系统，Flex布局都能提供出色的效果。

总结：

  • 使用display: flex;将元素标记为Flex容器。
  • 使用容器属性如flex-direction、justify-content和align-items来控制Flex容器中项目的排列和对齐方式。
  • 使用项目属性如order、flex-grow和flex-basis来控制Flex项目的顺序和大小。
  • 可以通过简写形式flex来同时设置flex-grow、flex-shrink和flex-basis的值。
  • Flex布局是一种强大而灵活的布局模型，适用于各种网页布局需求。

以上是对CSS Flex布局的简要介绍和示例代码。