如何使 flexbox 响应式并将 1 堆叠在一起答案

【问题标题】：How to make flexbox responsive and stack 1 on top of each other如何使 flexbox 响应式并将 1 堆叠在一起
【发布时间】：2019-09-28 13:24:34
【问题描述】：

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

使用 @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 个彼此相邻的相等方形框，在移动设备中这些框不堆叠

桌面：

【问题讨论】：

寻求代码帮助的问题必须在在问题本身中包含重现它所需的最短代码，最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
@Paulie_D 谢谢，我现在已经包含了一个 JSFiddle
在问题本身 - 就在此处以粗体显示
小提琴中没有媒体查询-您可能还想查看flex-wrap:wrap。

标签： html css flexbox responsive

【解决方案1】：

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

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

.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>

【讨论】：

【解决方案2】：

在您选择的媒体查询中，将容器框元素的 flex 方向设置为列：

@media screen and (max-width: ___rem) {
    .box { flex-direction: column; }
}

默认的 flex 方向是行，这是您的列当前显示的方向。

https://css-tricks.com/almanac/properties/f/flex-direction/

【讨论】：

【解决方案3】：

检查这个我已经更正了这个 use flex: 0 0 100%; 和 max width:100% 和 flex-wrap: wrap; 用于包装内容 https://jsfiddle.net/arindam1996/ungarj85/3/ 。现在检查这个小提琴

【讨论】：