html - 如何使 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/

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

桌面:

Answer 1

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

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

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

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