如何使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小提琴：https://jsfiddle.net/p650fdL4/

桌面视图具有3个彼此相等的正方形框，在移动时这些框不会堆叠

桌面：

Answer 1

您非常亲密。您需要宽度：在列上为100％，但弹性框项目默认情况下不会换行。您需要使用媒体查询告诉它包装在手机上。

在移动媒体查询中，请确保在Worksheets("Y").Range("A2").copy Worksheets("X").Range("AD17") 元素上包含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; }

Answer 2

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

Get-ChildItem | ForEach-Object{
    switch ($_.CreationTime.Hour){
        #creation hour is 1, check if minutes are over 30
        1 { if ($_.CreationTime.Minute -ge 30){ Write-Host $_; break} }
        #since hour is 2, no other check needed
        2 { Write-Host $_; break}
        #creation hour is 3, check if minutes is under 30
        3 { if ($_.CreationTime.Minute-le 30){ Write-Host $_; break } }
        #hour isn't 1,2 or 3 so do nothing
        default {break}
    }
}

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

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/的问题。现在检查这个小提琴