无法使用flex

问题描述

我已经阅读了很多文章，描述了如何将比div容器更大的img居中。但是我还需要水平滚动该图像（特别是对于移动设备），我无法解释自己的行为以及如何解决该问题。

我使用flex（通过引导类）：

<section id="container">
    <div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
        <img src="image_bigger_than_div"/>
    </div>
<section>

其他CSS：

.for-mobile img { flex:none }

图像居中对齐，我可以在右侧滚动，但不能在左侧滚动。如果我将伸缩方向更改为反向行，则会发生相反的行为。 为什么？请问该如何解决？

Thx

注意： 如果我没有“ justify-content：center”，则img不会居中，并且我可以滚动整个图像。

解决方法

代码对我来说很好，我不得不关闭代码段中的section标签。

我还向图像添加了类img-fluid以使其具有响应性，但是如果要滚动，只需删除该类即可。

<section id="container">
    <div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
        <img class="img-fluid" src="assets/images/image.jpg" />
    </div>
</section>

而且我能够左右滚动而没有任何问题...

我还认为不需要您提供的CSS代码。