使用Flexbox实现移动端自适应布局：可展开内容盒方案

针对你的需求，我们可以通过媒体查询调整移动端的Flex布局方向，并修改hover交互逻辑，实现内容盒垂直堆叠且hover时向下展开的效果，具体修改如下：

核心修改点 #

• 为容器添加flex-wrap: wrap，确保桌面端空间不足时自动换行，提升布局健壮性
• 通过媒体查询（以768px为分界点）将移动端.container的flex-direction改为column，让内容垂直堆叠
• 移动端移除.column:hover的宽度调整逻辑，改为通过显示隐藏内容实现向下扩展效果
• 调整移动端间距，将.column的margin-right改为margin-bottom，避免垂直堆叠时的右侧冗余间距
• 修正原代码中无效属性（如.column的flex-direction: row，它本身不是flex容器，该属性无意义）

修改后的完整代码 #

CSS 代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* 改为min-height，避免内容溢出时页面被截断 */
}
body {
    background-color: #10172b;
    font-family: Poppins, Arial, "sans-serif";
    color: #ffffff;
}
.container {
    display: flex;
    justify-content: space-between;
    background: #10172b;
    width: 100vw;
    flex-wrap: wrap; /* 新增：桌面端空间不足时自动换行 */
    padding: 0 20px; /* 新增：避免内容贴边 */
}
.widget-image {
    padding-top: 10vh;
    display: inline-block;
    width: 100%; /* 新增：图片占满列宽度 */
}
.column {
    background-color: #293346;
    transition: all 0.5s ease; /* 统一过渡效果 */
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 20px; /* 新增：垂直堆叠时的间距 */
    flex: 1; /* 桌面端默认平分空间 */
    min-width: 300px; /* 桌面端最小宽度，避免列过窄 */
    overflow: hidden; /* 确保内容展开时过渡平滑 */
}
/* 桌面端hover效果 */
@media (min-width: 769px) {
    .column:hover {
        flex: 0 0 550px; /* 按需求设置桌面端hover宽度 */
    }
    .column:hover .widget-image {
        padding-top: 0;
    }
}
/* 移动端适配 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 垂直堆叠 */
        padding: 20px;
    }
    .column {
        margin-right: 0; /* 移除右侧间距 */
        flex: 1; /* 移动端默认占满宽度 */
    }
    .column:hover .widget-image {
        padding-top: 0;
    }
}
.column:hover .description,
.column:hover .learn-more-button {
    display: block; /* 统一显示隐藏内容 */
}
.responsive {
    max-width: 100%;
    height: auto;
}
.learn-more-button {
    background-color: #6d38f1;
    color: #ffffff;
    font-size: 1.1em;
    padding: 10px 24px;
    border: 0;
    text-align: left;
    margin: 20px; /* 新增：按钮间距 */
    display: none; /* 统一隐藏逻辑 */
    transition: background-color 0.3s ease; /* 修正过渡属性，原flex过渡无效 */
}
.learn-more-button:hover {
    background-color: #15E333;
    cursor: pointer;
}
.hide {
    display: none;
}
.description {
    text-align: justify;
    padding: 0 20px 20px; /* 调整内边距，避免内容贴边 */
    font-size: 1em;
    display: none; /* 统一隐藏逻辑 */
}
.heading-prix {
    padding: 20px; /* 调整内边距，避免标题贴边 */
    font-size: 1.75em;
    font-family: Poppins, "sans-serif";
    font-weight: 600;
}

HTML 代码（保持原结构即可） #

<div class="container">
  <div class="column">
    <p class="heading-prix">Title</p>
    <p class="description hide">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
    <img src="https://placehold.co/350x300.png" alt="Services" class="widget-image responsive"  />
    <button class="learn-more-button hide">Learn More &nbsp;&nbsp; &#9658;</button>
  </div>
  <div class="column">
    <p class="heading-prix">Title</p>
    <p class="description hide">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
    <img src="https://placehold.co/350x300.png" alt="Warehouse" class="widget-image responsive" />
    <button class="learn-more-button hide">Learn More &nbsp;&nbsp; &#9658;</button>
  </div>
  <div class="column">
    <p class="heading-prix">Title</p>
    <p class="description hide">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
    <img src="https://placehold.co/350x300.png" alt="IIOT" class="widget-image responsive" />
    <button class="learn-more-button hide">Learn More &nbsp;&nbsp; &#9658;</button>
  </div>
</div>

效果说明 #

• 桌面端：保持横向布局，hover时指定列宽度扩展，隐藏的描述和按钮自动显示
• 移动端：内容垂直堆叠，hover时图片上移，隐藏内容展开实现向下扩展的效果

内容的提问来源于stack exchange，提问作者Anita Mandal