CSS基础7-弹性盒子，前端开发编程

弹性盒子（Flexible Box，Flexbox）是CSS3新引入的一种布局模型，可以简便、灵活地处理容器内部元素的排列、对齐和分配空间。

以下是一个简单的弹性盒子布局示例：

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* 使用弹性盒子布局 */
  flex-direction: row; /* 设置主轴方向为水平 */
  justify-content: space-around; /* 设置项目沿主轴对齐方式 */
  align-items: center; /* 设置项目沿交叉轴对齐方式 */
  height: 100px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 项目间距 */
  padding: 10px; /* 项目内填充 */
  background-color: coral; /* 项目背景颜色 */
  color: white; /* 项目文字颜色 */
  font-size: 16px; /* 项目文字大小 */
}

这个示例中，.flex-container 类使用 display: flex 属性使得div变为弹性容器，flex-direction 设置主轴方向为水平，justify-content 设置项目沿主轴的对齐方式为平分空间，align-items 设置项目沿交叉轴的对齐方式为居中。.flex-item 类则是弹性项目的样式设置。