CSS中的display: flex；

display: flex;

 是CSS（层叠样式表）中用于设置容器为弹性盒子模型（Flexbox）的属性值。弹性盒子模型是CSS3中引入的一个新的布局模式，它设计用来更好地在容器中布局、对齐和分配空间给子元素（即容器内的项目），即使容器的大小是动态变化的或者未知的。

当你为一个元素设置 display: flex; 时，这个元素会变成一个弹性容器，而它的直接子元素则自动成为弹性项目（flex items）。

使用Flexbox，你可以轻松地控制子元素的对齐方式（水平或垂直）、排列顺序、空间分配等，而无需使用浮动或定位等传统方法，这大大简化了复杂的布局任务。

下面是一些常用的Flexbox属性：

• flex-direction: 控制弹性容器中子元素的排列方向（例如，row 表示水平排列，column 表示垂直排列）。
• justify-content: 控制弹性容器中的子元素在主轴（默认是水平方向）上的对齐方式。
• align-items: 控制弹性容器中的子元素在交叉轴（与主轴垂直）上的对齐方式。
• flex-wrap: 控制弹性容器中的子元素是否换行。
• flex: 一个简写属性，用于设置 flex-grow、flex-shrink 和 flex-basis 三个属性，用于控制子元素的伸缩比例和基础大小。

 

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

​

​

在这个例子中，.container 下的所有直接子元素会水平排列（因为 flex-direction 是 row），并且这些子元素会在容器中水平和垂直居中（因为 justify-content 和 align-items 都是 center）。

使用Flexbox可以大大简化布局过程，并使得响应式设计变得更加容易。不过，也需要注意，Flexbox并不适用于所有场景，有时候结合使用Grid布局或其他布局技术可能会得到更好的效果。