css - 大屏幕上的并排元素并以小屏幕为中心

Question

如何在大屏幕上并排显示元素，左右浮动，并在小屏幕上居中？如果可能没有媒体查询

看图片了解：https ://i.stack.imgur.com/7a8KJ.jpg

标签： cssbootstrap-4

Answer 1

这是代码；

.abc {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

<div class="abc">
    <div>first element</div>
    <div>second element</div>
    <div>third element</div>
    <div>forth element</div>
</div>