CSS Flex 布局 【转载】，深度集成

在CSS中，Flexbox布局提供了一种更为有效的方式来对容器内的项目进行排版，它可以使容器的子项在任何方向上（横向或纵向），以一种灵活的方式进行排列。

以下是一些关于CSS Flex布局的基本概念和示例代码：

1. 基本Flex容器

.container {
  display: flex; /* 或者 inline-flex */
}

2. 在Flex容器中居中项目

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

3. 改变Flex项目的排列方向

.column-container {
  display: flex;
  flex-direction: column; /* 子项垂直排列 */
}

4. 使用Flexbox创建一个网格布局

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

5. 使用Flexbox对齐交叉轴

.cross-axis-container {
  display: flex;
  align-content: center; /* 交叉轴上的项目垂直居中 */
}

6. 使用Flexbox对齐主轴内项目的对齐方式

.main-axis-container {
  display: flex;
  justify-content: space-between; /* 项目之间保持相等的空间 */
}

7. 使用Flexbox进行弹性伸缩

.flex-item {
  flex: 1; /* 所有项目均分空间 */
}

8. 使用Flexbox进行顺序更改

.order-container {
  display: flex;
}
.first-item {
  order: -1; /* 将此项目排列在前 */
}

以上代码展示了Flexbox布局的基本概念和使用方法，Flexbox提供了强大而灵活的工具来处理布局问题，并且能够适应各种屏幕尺寸和设备。