html - 如何使用 flexbox 将 2 行居中？

<分区>

您好，我有以下代码，但我正在努力解决布局问题。理想情况下，我希望这些行如图所示从左到右排列，但我希望将整个结构居中。

目前有

但我想要这个

这是我目前使用的 css 和代码。

<div class="service_list_container">
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
        </div>

.service_list_container {
    background: blue;
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service_tab {
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    height: 400px;
    background: #fff;
    margin: 10px 20px;
    -webkit-box-shadow: -2px -1px 5px 0px #efefef;
    -moz-box-shadow: -2px -1px 5px 0px #efefef;
    box-shadow: -2px -1px 5px 0px #efefef;
    border: solid 1px #e8e8e8;
}

是否可以使用 flexbox 来实现我所追求的目标？谢谢

最佳答案

您需要使用 flex-basis: 30%; 而不是 flex-basis: 300px;

.service_list_container {
    background: blue;
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service_tab {
    flex-basis: 30%;
    flex-grow: 0;
    flex-shrink: 0;
    height: 400px;
    background: #fff;
    margin: 10px 1.5%;
    -webkit-box-shadow: -2px -1px 5px 0px #efefef;
    -moz-box-shadow: -2px -1px 5px 0px #efefef;
    box-shadow: -2px -1px 5px 0px #efefef;
    border: solid 1px #e8e8e8;
}

<div class="service_list_container">
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
        </div>

关于html - 如何使用 flexbox 将 2 行居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45436444/

上一篇：python - 如何将 css 格式应用于 pd.DataFrame 而不显示索引列

下一篇：html - 你如何水平对齐提交按钮？

相关文章：

html - 显示 : none; is not working.

HTML 不能改变 Div 的高度

javascript - 即使我有链接，如何强制打开我的 jQuery 对话框？

javascript - 通过单击外部并单击按钮来关闭 div

html - CSS填充父高度并保留

css - 带有 Flex Box 的方 block

javascript - Ammap.js 4 - 将 map 设置为半静态 View 地球 + 将 mapObject 设置为中心

浏览器不支持 HTML 元素的无 JavaScript 回退

html - 如何从文件路径创建 Html 图像源？

html - 在全宽容器内居中容器？