flex 布局 代码实现

flex布局是一种弹性布局模型，可以方便地实现元素的水平或垂直居中、平均分配空间等效果。下面是一个简单的flex布局代码实现的例子：

.container {
  display: flex; /* 将容器设置为flex布局 */
  justify-content: space-between; /* 水平方向上平均分配元素 */
  align-items: center; /* 垂直方向上居中元素 */
}

.item {
  flex: 1; /* 将元素设置为弹性元素，平均分配剩余空间 */
}

上述代码中，`.container`是容器元素，通过`display: flex`将其设置为flex布局。`justify-content: space-between`表示水平方向上平均分配元素，`align-items: center`表示垂直方向上居中元素。`.item`是容器中的子元素，通过`flex: 1`将其设置为弹性元素，平均分配剩余空间。