在移动设备上折叠 flexbox 列答案

【问题标题】：Collapse flexbox column on mobile在移动设备上折叠 flexbox 列
【发布时间】：2018-11-04 15:31:28
【问题描述】：

我有两列（使用 flexbox）和一个媒体查询断点。但是，我尝试了以下 css 属性，以使列在移动设备上为 100% 并堆叠在一起。

目前保持为一列，始终并排。

宽度：100%；
弹性增长：1；

容器代码

.flexbox-container {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

列的代码

.flexbox-column {
  display: flex;
    width: 100%;
    padding: 50px;
  background-color: yellow;
}

@media (min-width: 768px) {
  .flexbox-column {
    width: 50%;
    background-color: #444;
  }
}

我的代码笔（我不知道如何在此处使用“运行代码”功能） https://codepen.io/jordanc26/pen/yjWZQJ

【问题讨论】：

.flexbox-column { display: flex;弹性：1；填充：50px；背景颜色：黄色； } @media (max-width: 768px) { .flexbox-container { flex-direction: column; } }

标签： css flexbox

【解决方案1】：

移动这条规则

  .flexbox-container {
     display: flex;
  }

进入媒体查询范围就足够了：
实际上，对于狭窄的视口，您的两个列元素都不再位于 flexbox 容器中，因此它们将相互堆叠，并且将延伸到整个可用宽度

codepen demo

【讨论】：