display:flex怎么使用的代码

display:flex是CSS3中的一个布局属性，它用于实现弹性盒子布局。使用flex布局可以轻松地实现水平、垂直、对齐等多种布局效果。以下是一个简单的例子：

HTML代码：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

CSS代码：

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

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box2 {
  width: 100px;
  height: 150px;
  background-color: blue;
}

.box3 {
  width: 100px;
  height: 120px;
  background-color: green;
}

在上面的代码中，我们首先将包含盒子的父元素设置为flex布局，这里我们使用了justify-content和align-items两个属性来控制子元素的排列方式和对齐方式。接下来，我们定义了三个子元素box1、box2、box3，并设置它们的宽度、高度和背景色。最终呈现出来的效果是，三个盒子在父元素中按照从左到右的顺序排列，并且它们之间有一定的间隔。