html中display的flex属性

在HTML中，display属性用于定义元素的显示类型。其中，display:flex属性用于创建一个弹性盒子容器，使其内部的子元素能够灵活地布局和对齐。

以下是一个使用display:flex属性的示例：

<style>
    .container {
        display: flex;
    }
    .item {
        flex: 1;
        height: 100px;
        background-color: lightblue;
        margin: 10px;
    }
</style>

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

在上述示例中，我们创建了一个class为container的div元素，并将其display属性设置为flex。这样，该div元素就成为了一个弹性盒子容器。然后，我们在容器内部创建了三个class为item的div元素作为子元素。

通过设置子元素的flex属性，我们可以控制它们在容器内的布局。在上述示例中，我们将子元素的flex属性设置为1，表示它们平均分配剩余空间。同时，我们还设置了子元素的高度、背景颜色和外边距等样式。

通过使用display:flex属性，我们可以轻松地实现弹性布局，使元素在容器内自动调整大小和对齐方式。