day11_2 CSS3弹性盒子flexbox

弹性盒子（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; /* 使用弹性盒子布局 */
  width: 100%; /* 容器宽度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 间距 */
  padding: 15px; /* 填充 */
  color: white; /* 字体颜色 */
  font-size: 16px; /* 字体大小 */
  text-align: center; /* 文本居中 */
}
 
/* 这里可以添加更多的样式来定制弹性盒子的行为 */

这个例子中，.flex-container 类使用 display: flex; 属性使得其子元素（.flex-item 类）默认会使用弹性盒子布局。这意味着所有子元素会被排列在一行内，并根据容器的大小自动伸缩。