请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？

BJYXSZD-91852024-01-26 10:22

Flexbox（弹性盒布局模型）是CSS3中一种用于页面布局的模块。它通过定义容器和其内部项目的灵活的、自适应的布局来实现页面的响应式设计。

Flexbox的适用场景包括以下几种情况：

等高布局：通过设置容器的display: flex，项目（子元素）将自动等高并填充容器。
垂直居中：通过设置容器的align-items: center，项目将自动垂直居中。
自适应布局：通过设置容器的flex-wrap: wrap，项目将自动根据可用空间进行换行或自动压缩。
宽度分配：通过设置容器的justify-content: space-around，项目将自动平均分配可用空间。

下面是一个简单的Flexbox布局的示例代码：

html 复制代码

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px;
    }
    .item {
        flex: 1;
        height: 100px;
        background-color: #f0f0f0;
        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>

在上面的代码中，容器使用display: flex来启用Flexbox布局。.item类定义了项目的样式，其中flex: 1表示每个项目的宽度相等，margin属性用于设置项目之间的间距。

这样，项目将自动平均分配容器的宽度，同时垂直居中。根据容器的高度，项目之间的间距也会自动调整。