display flex用法

display: flex 是 CSS 中用于创建弹性盒子布局的属性。它可以应用于父元素（容器）以及子元素（项目）。下面是一些 display: flex 的常见用法：

1. 父元素（容器）上使用：

   .container {
     display: flex;
   }

这将把容器设置为弹性盒子布局，并使其所有直接子元素成为弹性项。

2. 设置主轴方向：

   .container {
     display: flex;
     flex-direction: row; /* 默认值，水平方向排列 */
     /* 或者可选的其他值：row-reverse, column, column-reverse */
   }

通过调整 flex-direction 属性，可以设置主轴方向为水平或垂直排列，并选择排列方向。

3. 控制项目在主轴上的分布：

   .container {
     display: flex;
     justify-content: flex-start; /* 默认值，项目向主轴起点对齐 */
     /* 或者可选的其他值：flex-end, center, space-between, space-around */
   }

使用 justify-content 属性可以控制项目在主轴上的分布方式。

4. 控制项目在交叉轴上的对齐方式：

   .container {
     display: flex;
     align-items: stretch; /* 默认值，项目拉伸以填充容器 */
     /* 或者可选的其他值：flex-start, flex-end, center, baseline */
   }

使用 align-items 属性可以控制项目在交叉轴上的对齐方式。

这些是 display: flex 的一些常见用法，但还有更多属性和用法可以调整弹性盒子布局。