使用CSS Flex跨越多个列

基础概念

CSS Flexbox（弹性盒子布局）是一种用于创建灵活布局的CSS模块。它允许容器内的元素在必要时进行扩展或收缩，以适应不同的屏幕尺寸和布局需求。Flexbox布局非常适合于创建响应式设计和复杂的布局结构。

类型

Flexbox布局主要涉及两个部分：

容器（Flex Container）：通过设置display: flex;或display: inline-flex;来定义。
项目（Flex Items）：容器内的子元素。

应用场景

导航栏：创建响应式的导航菜单。
卡片布局：在网格系统中排列卡片。
表单布局：对齐表单元素，使其看起来整洁。
图像画廊：均匀分布图像。
多列布局：跨越多个列的布局。

示例代码：使用CSS Flex跨越多个列

假设我们有一个三列布局，我们希望某个项目能够跨越所有三列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Multi-column Layout</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap; /* 允许项目换行 */
        }
        .column {
            flex: 1 1 30%; /* 每个列占据30%宽度，允许扩展和收缩 */
            margin: 5px;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .span-all {
            flex: 1 1 100%; /* 跨越所有列 */
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="span-all">This item spans all columns</div>
        <div class="column">Column 3</div>
    </div>
</body>
</html>