弹性盒模型(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; /* 条目内填充 */
background-color: coral; /* 条目背景颜色 */
color: white; /* 条目文字颜色 */
font-size: 15px; /* 条目文字大小 */
}
在这个例子中,.flex-container
类使用 display: flex;
属性来指定使用弹性盒模型布局。.flex-item
类定义了条目的一些基本样式。这个容器中的三个条目将会水平排列,并且可以通过弹性盒模型的属性来进行对齐和分配空间。