居中的弹性父母的前几个孩子没有出现在屏幕上[重复]答案

【问题标题】：First few children of centered flex parent not showing up on screen [duplicate]居中的弹性父母的前几个孩子没有出现在屏幕上[重复]
【发布时间】：2021-03-12 14:44:35
【问题描述】：

我正在创建某些重复的 UI 元素，选择框说。我将它们保存在一个灵活且内容居中的父级中。现在，当项目更多时，我得到了滚动，并且能够看到带有 scroll 的最后一个元素，但不是前几个元素。我希望元素从中心出现并在两个方向上均匀扩展。

<html>
<body>
    <div style="display: flex;justify-content: center; overflow-x: auto;">
        <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>

                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>               
        <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>

    </div>
</body>
</html>

【问题讨论】：

如果你想让你的元素在两个方向上均匀地出现（这样滚动条居中）——那么应该用 JS 来完成......但是你必须摆脱其他问题，比如正确可见元素居中等。尝试使用某种滑块解决您的问题（如kenwheeler.github.io/slick）

标签： html css

【解决方案1】：

是因为justify-content: center;。你真的不需要那个。

<html>
<body>
    <div style="display: flex; justify-content: center; overflow-x: auto;">
        <select style="width: 400px; height: 100px;  margin: 20px; flex-shrink:0; margin-left:auto">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>

                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>               
        <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>
                <select style="width: 400px; height: 100px; margin: 20px; flex-shrink:0; margin-right: auto">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
        </select>

    </div>
</body>
</html>

【讨论】：

我需要它，因为进入 div 的选择框的数量是动态的。我需要在中间展示它们。
看看这个。这可能是你的答案stackoverflow.com/questions/34184535/…
是的，链接有帮助。将 margin-left: auto 给第一个框和 margin-right: auto 给最后一个框。非常感谢
很高兴它成功了。干杯！