CSS跨两行均匀分布项，同时保持项的宽度灵活

基础概念

CSS（层叠样式表）用于描述HTML文档的外观和格式。要实现跨两行均匀分布项，同时保持项的宽度灵活，可以使用CSS Flexbox布局。

类型

Flexbox布局主要涉及以下几个属性：

display: flex;：将容器设置为Flexbox容器。
flex-direction：定义主轴的方向（默认为row，即水平方向）。
flex-wrap：定义是否允许子元素换行（默认为nowrap，即不换行）。
justify-content：定义主轴上的对齐方式。
align-items：定义交叉轴上的对齐方式。
flex：定义子元素的弹性。

应用场景

适用于需要灵活布局的场景，如响应式网页设计、仪表盘、卡片布局等。

示例代码

假设我们有一个包含多个项目的容器，希望这些项目跨两行均匀分布，并且每个项目的宽度可以根据内容自适应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .item {
            flex: 1 1 calc(33.33% - 20px);
            margin: 10px;
            padding: 20px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

解释

.container：设置为Flexbox容器，并允许子元素换行（flex-wrap: wrap;），同时在主轴上均匀分布（justify-content: space-between;）。
.item：每个子元素的宽度为calc(33.33% - 20px)，其中33.33%表示每行三个项目，20px是项目之间的间距。flex: 1 1 calc(33.33% - 20px);表示子元素可以增长和收缩，初始宽度为calc(33.33% - 20px)。