3个相同宽度的flexbox项目的水平居中-Java 学习之路

我一直试图使用flexbox水平地居中这三个项目，但没有成功 . 它们都需要具有相同的宽度 . 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;
}

我也尝试过为每个孩子设置自动左边距和右边边距，为容器居中设置对齐内容，甚至与容器的固定宽度（以像素为单位）相结合，但似乎没有任何效果 . 更具体地说，无论我在那里放置什么 Value ，合理内容在这里似乎根本不起作用 . 我错过了什么或做错了什么？

1 回答

您分配给flex-items的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>

Alternative ，基于扩展的要求 .

需要一个额外的包装器，它应该是 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>

回复于 2024-04-29T14:12:34+08:00

3个相同宽度的flexbox项目的水平居中

1 回答

相关问题