CSS Flexbox令人讨厌的行元素略微偏移

9 浏览
0 Comments

CSS Flexbox令人讨厌的行元素略微偏移

我在一个全宽容器中有两个div，我想用flexbox给它们提供可变大小，但无论我做什么，底部总是有一个烦人的偏移。使用margin可以接近解决问题，但永远不完美。

如果你运行下面的代码片段并滚动到底部，你会看到，图片和黑色内容容器没有对齐在底部。

出了什么问题？

代码如下：

#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%;

}

内容
内容

0

2 答案

0 Comments

问题出现的原因是容器的样式设置不正确，导致元素之间有微小的偏移。解决方法是调整容器和元素的样式设置。

首先，容器的样式设置应该为：

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

这样可以确保容器的宽度为100%，并且元素按照水平方向排列。

然后，调整菜单元素（#menu）的样式设置：

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

这样可以确保菜单元素在垂直方向上居中对齐，并且具有相同的宽度。

最后，调整图片元素（#image）的样式设置：

#image {
  width: 100%;
}

这样可以确保图片元素占据整个容器的宽度。

通过以上的样式调整，可以解决CSS Flexbox中元素微小偏移的问题。

0
0 Comments

CSS Flexbox是一种用于网页布局的强大工具，但有时候也会出现一些令人困扰的问题。其中一个问题是在使用Flexbox布局时，行元素之间会出现略微的偏移。

出现这个问题的原因是图像是内联元素，因此在垂直方向上会保留一些空间，这是为了对齐图像的基线（虽然看不到）。为了解决这个问题，有两个可能的解决方法：

1. 将图像的display属性设置为block，代码如下：

img {
  display: block;
}

2. 将图像容器的字体大小设置为0，代码如下：

#image-wrapper {
  font-size: 0;
}

以下是完整的HTML和CSS代码示例：


  

    
  

  




#container {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}
#image-wrapper {
  flex-grow: 3;
  max-width: 1000px;
  position: relative;
}
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%;
}

第二种解决方法是将图像容器的字体大小设置为0，代码如下：

#image-wrapper {
  font-size: 0;
}

这样就可以解决CSS Flexbox中行元素略微偏移的问题了。希望这篇文章对你有所帮助！

0