gpt4 book ai didi

html - 3个相同宽度的flexbox元素的水平居中

转载 作者:太空宇宙 更新时间:2023-11-03 23:06:41 25 4
gpt4 key购买 nike

我一直在尝试使用 flexbox 将这 3 个元素水平居中,但没有成功。它们都需要具有相同的宽度。HTML:

 <div id="contact_flex_container">
<div id="fb">
<img src="img/contact/fb.png" class="contact_img">
<h3>Title1</h3>
</div>

<div id="yt">
<img src="img/contact/yt.png" class="contact_img">
<h3>Title2</h3>
</div>

<div id="mail">
<img src="img/contact/mail.png" class="contact_img">
<h3>Title3</h3>
</div>
</div>

CSS:

#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: space-around;
}

.contact_img {
width: 40px;
height: 40px;
}

#fb {
flex-basis: 0;
flex-grow: 1;
}

#yt {
flex-basis: 0;
flex-grow: 1;
}

#mail {
flex-basis: 0;
flex-grow: 1;
}

我也尝试过将每个 child 的 margin-left 和 right 设置为 auto,将 justify-content 设置为容器的中心,甚至结合容器的固定宽度(以像素为单位),但似乎没有任何效果。更具体地说, justify-content 在这里似乎根本不起作用,无论我在那里放什么值。我错过了什么或做错了什么?

最佳答案

您分配给 flex 元素的 flex 属性使它们尽可能大(在本例中为容器的 33%)。

只需删除它们,然后将父级更改为 justify-content:center

#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: center
}
.contact_img {
width: 40px;
height: 40px;
}
#fb {} #yt {} #mail {}
<div id="contact_flex_container">
<div id="fb">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title1</h3>
</div>

<div id="yt">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title2</h3>
</div>

<div id="mail">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title3</h3>
</div>
</div>

备选方案,基于扩展要求。

需要一个额外的包装器,它应该是 inline-flex

#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: center
}
.wrap {
display: inline-flex;
}
.wrap > div {
flex: 1;
border: 1px solid grey;
}
.contact_img {
width: 40px;
height: 40px;
}
<div id="contact_flex_container">
<div class="wrap">

<div id="fb">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem ipsum dolor sit.</h3>
</div>

<div id="yt">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem ipsum.</h3>
</div>

<div id="mail">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem</h3>
</div>
</div>

关于html - 3个相同宽度的flexbox元素的水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34507068/

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