在 HTML 中创建弹性布局可以使用 CSS3 弹性盒子模型(Flexbox)。通过在父元素上设置 display 属性为 flex,可以将其设置为弹性容器。然后,可以使用 flex 属性来定义子元素的宽度、高度、顺序和对齐方式。
以下是创建弹性布局的一些关键词和代码示例:
示例代码:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}