Question

我试图弄清楚flexbox，但是仅仅堆叠两个元素给我带来了困难。

如何仅在移动设备上堆叠这些元素？

<div class="col-sm-6 col-12 d-flex justify-content-end">
  <!-- Right side -->
  <div class="d-flex">
    <p class="mb-0 align-self-center">© 2019 Alle rechten voorbehouden - Test</p>
    <img class="snmlogo align-self-center" src="images/snm-logo-white.png" alt="altimage">
  </div>
  <!--/ Right side -->
</div>

我正在谈论<p>和<img>元素。在桌面上，它们需要彼此相邻显示，这样才能正常工作。我使用justify-content-end将它们放在页脚的右侧。在移动设备上，我尝试同时提供元素display-block和width:100%，但这并没有改变任何内容。

如何将它们像这样保留在桌面上，但如何将其堆叠在移动设备上？

Answer 1

在小屏幕上更改伸缩容器的方向。

flex-column默认情况下将设置列方向，您将在更高的断点（更大的屏幕）上覆盖该列的方向

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
  <p class="mb-0 ">© 2019 Alle rechten voorbehouden - Test</p>
  <img class="snmlogo" src="
https://picsum.photos/40/40?image=0" alt="altimage">
</div>

或者您也可以只在更大的屏幕上定义flex容器：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="d-md-flex align-items-center justify-content-center text-center">
  <p class="mb-0 ">© 2019 Alle rechten voorbehouden - Test</p>
  <img class="snmlogo" src="
https://picsum.photos/40/40?image=0" alt="altimage">
</div>

如何仅使用Flexbox在移动设备上将两个元素彼此堆叠

1 个答案: