时间戳

首页 > 解决方案 > 如何使 flexbox 响应式并将 1 堆叠在一起

html - 如何使 flexbox 响应式并将 1 堆叠在一起

问题描述

当缩小到移动尺寸时，我无法让我的盒子堆叠在一起

使用@media 缩小并将宽度设置为 100% 的古老方法似乎不适用于 Flexbox

这是我的CSS：

.box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  padding-bottom: 1em;
  text-align: center;
}

.box .column {
  flex: 1;
  background: lightgray;
  margin-right: 1em;
  padding: 1em;
  text-align: center;
}

JS 小提琴：https ://jsfiddle.net/p650fdL4/

桌面视图有 3 个彼此相邻的相等方形框，在移动设备中这些框不堆叠

桌面： 桌面

移动的

标签： htmlcssflexboxresponsive

解决方案

你非常亲近。您需要 width: 100% 在列上，但默认情况下弹性框项目不会换行。您需要使用媒体查询告诉它在移动设备上包装。

在您的移动媒体查询中，确保包含flex-wrap: wrap在.box元素上

.box { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; padding-bottom: 1em; text-align: center; flex-wrap: wrap;}
.box .column { flex: 1 1 100%; background: lightgray; margin-right: 1em; padding: 1em; text-align: center; }
<div class="box">
            <div class="column">
                <div class="columnBackground">

                    <h3 class="h3Color">We multiply your impact</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
            <div class="column">
                <div class="columnBackground">
                    <h3 class="h3Color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
                    <p>Some info</p>
                </div>
            </div>
            <div class="column">
                <div class="columnBackground">

                    <h3 class="h3Color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
                    <p>Some info</p>
                </div>
            </div>
        </div>

推荐阅读