CSS Flexbox烦人的行元素轻微偏移[重复]答案

【问题标题】：CSS Flexbox annoying slight offset of row elements [duplicate]CSS Flexbox烦人的行元素轻微偏移[重复]
【发布时间】：2018-07-10 00:52:27
【问题描述】：

所以我在一个全宽容器中有两个 div，我想通过 flexbox 提供可变大小，但无论我做什么，底部都有一个烦人的偏移量。使用边距我可以接近解决问题，但它从来都不是完美的。

如果你运行下面的代码sn-p并滚动到底部可以看到，图片和黑色内容容器底部没有对齐。

发生了什么事？

#container {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
}

#image-wrapper {
    flex-grow: 3;
    max-width: 1000px;
    position: relative;
    /*background-color: black;*/
}

#menu {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background-color: #101010;
    color: #fefefe;
    align-items: stretch;
    display: flex;
    margin-bottom:7px;
}

#form {
    width: 100px;
}

#image {
    width: 100%;
}

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>
      
    </div>
  </div>

</container>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

图像下方有一些空间，因为图像是内联元素，因此在图像垂直对齐的（不可见）基线下方保留了一些空间。为避免这种情况，有两种可能的解决方案：

1.) 将display: block; 应用于图像（参见第一个sn-p）

或

2.) 将font-size: 0 应用于图像容器（参见第二个 sn-p）

#container {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}

#image-wrapper {
  flex-grow: 3;
  max-width: 1000px;
  position: relative;
  /*background-color: black;*/
}

img {
  display: block;
}

#menu {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-color: #101010;
  color: #fefefe;
  align-items: stretch;
  display: flex;
}

#form {
  width: 100px;
}

#image {
  width: 100%;
}

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>

    </div>
  </div>

</div>

第二种解决方案：

#container {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}

#image-wrapper {
  flex-grow: 3;
  max-width: 1000px;
  position: relative;
  /*background-color: black;*/
  font-size: 0;
}

#menu {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-color: #101010;
  color: #fefefe;
  align-items: stretch;
  display: flex;
}

#form {
  width: 100px;
}

#image {
  width: 100%;
}

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>

    </div>
  </div>

</div>

【讨论】：

哦，css...谢谢！

【解决方案2】：

#container {
      width: 100%;
      display: inline-flex;
      flex-direction: row;
    }

    #image-wrapper {
      flex-grow: 3;
      max-width: 1000px;
      position: relative;
      /*background-color: black;*/
    }

    #menu {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px;
      background-color: #101010;
      color: #fefefe;
      align-items: stretch;
      display: flex;
      margin-bottom:4px;

    }

    #form {
      width: 100px;
    }

    #image {
      width: 100%;
    }

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>
      
    </div>
  </div>

</container>

看起来边距有点偏

【讨论】：