gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:22:04 25 4
gpt4 key购买 nike

<分区>

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

目前有 enter image description here

但我想要这个 enter image description here

这是我目前使用的 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 来实现我所追求的目标?谢谢

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com