如何使用flexbox中心2行？

Question

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

目前有

但我想这个

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

array(0) {
  [0]=>"abc"
  [1]=> "efg"
  [2]=> "hij"

}

使用flexbox可以实现我的目标吗？ 感谢

Answer 1

您需要使用flex-basis: 30%;代替flex-basis: 300px;

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.service_tab { flex-grow: 1; } 

而不是

.service_tab { flex-grow: 1; }

＆＃13;

＆＃13;

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

.service_tab {
    flex-basis: 300px;
    flex-grow: 1;
    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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;