如何使 flexbox 响应并堆叠 1 在彼此之上

Question

当缩小到移动尺寸时，我无法让我的盒子相互堆叠

使用@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 Fiddle: https://jsfiddle.net/p650fdL4/

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

桌面：

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

Answer 2

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

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

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

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

Answer 3

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

如何使 flexbox 响应并堆叠 1 在彼此之上

How to make flexbox responsive and stack 1 on top of each other

html

css

flexbox

responsive