一个比较常见的CSS布局

有这样一个需求：父盒子里有多个小盒子，横向排列。超过4个的话，横向滚动。且初始化的时候，滚动条位于最右侧。效果图如下：

首先，我们写一下布局结构。

<div class="container" id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

其次是样式排列，使用flex布局可以轻松实现。代码如下：

.container {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: 200px;
    line-height: 200px;
    overflow-x: auto;
}
.item {
    flex: none;
    text-align: center;
    width: 25%;
    height: calc(100% - 5px);
    border: 1px solid #ff0000;
}

最后，初始化的时候将滚动条置于最右侧即可。

window.onload = () => {
    const containerDom = document.getElementById('container');
    containerDom.scrollLeft = containerDom.scrollWidth;
}