display:flex 怎么用

`display: flex` 是 CSS 中的一个弹性布局属性，用于创建响应式的、单行或多行的容器布局。它提供了一种方便的方式来组织和对齐其内的元素。以下是 `display: flex` 的基本用法：

1. 将容器设置为 `display: flex;` 或者 `display: -webkit-flex;` （为了兼容旧版浏览器），使该元素成为一个 Flex 容器。

.container {
   display: flex;
}

2. 对于 Flex 子元素（flex items），默认它们会沿着主轴（从左到右，对于从上到下的布局则是从上到下）排列。可以指定主轴方向，如 `flex-direction: row;`（默认）或 `flex-direction: column;`。

.container {
   display: flex;
   flex-direction: column;
}

3. 使用 `justify-content`, `align-items`, 和 `align-content` 属性来控制子元素在容器中的对齐方式。例如，`justify-content: center;` 可以水平居中子元素。

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

4. 可以调整每个子元素的大小，通过 `flex: 1;` 实现等比例分配空间（如果未设定宽度）或者使用 `flex-grow`, `flex-shrink`, 和 `flex-basis` 来指定伸缩性和初始尺寸。

.item {
   flex: 1;
}