Horizontal centering of 3 flexbox items of the same width

I have been trying to horizontally center these 3 items using flexbox, yet without success. They all need to be of the same width. 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;
}

I have also tried setting margin-left and right to auto for each child, justify-content to center for the container, even combined with fixed width of the container in pixels, yet nothing seems to work. To be more specific, justify-content does not seem to work at all here, whatever value I put there. What am I missing or doing wrong?

---

The flex properties you are assigning to the flex-items make them all as large as they can be (in this case 33% of the container).

Just remove them, then change the parent to 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>

链接地址: http://www.djcxy.com/p/13258.html

上一篇: 将容器中的Flexbox项目居中，如果左侧已有项目

下一篇: 同一宽度的3个柔性箱项目的水平居中