Question

我使用flex如下所示，有点灵活的世界，

.couple-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

以及 HTML 中的其他尺寸，我使用 bootstrap grid system ，如下所示，

  <div class="col-xs-12 couple-container">
    <div class="col-sm-3 couple nikhilpic">
          div1
    </div>
    <div class="col-sm-2 couple-info">
        div2
        </div>
       <div class="col-sm-1 heart">
        div3 
        </div>

    <div class="col-sm-2 couple-info">
        div4
        </div>
    <div class="col-sm-3 couple vidyapic">
           div5
    </div>
</div>

https://plnkr.co/edit/lGfsixyzoZnKX9qlY5VN?p=preview

上面的代码在桌面视图中提供了我想要的内容。例如。项目是集中对齐的，内容是空格。

问题：当我缩小尺寸（平板电脑或手机屏幕）时，我想使用flex来获取堆栈视图（一个在另一个之上），但不幸的是我没有得到欲望输出。 / p>

这就是我想通过移除以下行来实现移动屏幕，

https://plnkr.co/edit/bcEbslGtOrTRH6AyGYsb?p=preview

display: flex;
align-items: center;
justify-content: space-between;

但是看看桌面屏幕一切都搞砸了。

Answer 1

弹性容器的初始设置为flex-wrap: nowrap。这意味着flex项目被强制保留在一行中。如果要包装flex项，则需要提供容器flex-wrap: wrap。

但是，在处理百分比长度时，弹性项目可能会缩小而不会换行。或者包裹可能以不合需要的方式发生。在您的布局中似乎就是这种情况。

另一种选择是将布局从桌面行方向切换到移动/平板电脑的列方向。像这样：

@media ( max-width: 800px ) {
  .couple-container { flex-direction: column; align-items: stretch; }
}

revised plunkr

flex with bootstrap - 在调整

1 个答案: