时间戳

首页 > 解决方案 > Flexbox flex 属性似乎只适用于 Firefox，不适用于 Chrome 或 Edge

html - Flexbox flex 属性似乎只适用于 Firefox，不适用于 Chrome 或 Edge

问题描述

我正在尝试将弹性项目设置到页面底部。我让它在 Firefox 中工作，flex: 1 1但这在 Chrome 和 Edge 中没有效果。如下图所示，flex 项目在 Firefox 中位于页面底部，但在 Chrome 和 Edge 中，它下方有一个空隙。我希望 Chrome 和 Edge 对 flex 项具有与 Firefox 相同的效果。我确实尝试添加浏览器前缀，但它们没有改变任何东西。我将外部容器作为弹性盒，因此选取框组件是弹性项目。我在选取框组件内使用了一个网格。

Firefox（我想要的所有浏览器的结果）： 在此处输入图像描述

Chrome 和 Edge（都具有相同的结果）： 在此处输入图像描述

应用程序.css

.container {
  background-color: rgb(177, 202, 183);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-left: 3em;
  padding-right: 3em;

}

.layout {
  height: 20vh;
  margin: 20px 5%;
}

.navlinks {
  display: flex;
  flex-direction: column;
  margin-top: .8em;
}

.navlinks__link {
  color: #fff;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.86;
  letter-spacing: normal;
}

/* marquee css */

.marquee {
  height: auto;
  margin: 20px 5%;
  margin-bottom: 0;
  display: grid;
  grid-template-areas: "headline subhead"
                       "cta cta";
  grid-template-rows: minmax(20rem, auto) minmax(10rem, auto);
  column-gap: 3rem;
  flex: 1 1;
  -webkit-flex: 1 1;
}

.headline {
  grid-area: headline;
  align-self: center;
  color: #fff;
  font-family: Helvetica, sans-serif;
  font-size: 5.25rem;
  line-height: 5.25rem;
  letter-spacing: -2.2px;
}

.subhead {
  grid-area: subhead;
  align-self: center;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.625rem;
  letter-spacing: normal;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
}

/*cta css*/

.cta {
  background-color: #fff;
  color: #000;
  grid-area: cta;
  display: flex;
  flex-direction: row;
}

.cta > p {
  position: relative;
  align-self: center;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 2rem;
  letter-spacing: -0.63px;
}

HTML（我使用了 React，所以这段代码来自检查器，未定义的类也只是用于背景，所以不用担心） 在此处输入图像描述

标签： htmlcssbrowserflexboxresponsive-design

解决方案

实际上，我似乎通过将顶部和底部边距更改为 vh 并确保所有元素的总 vh 值等于 100vh 来解决问题。

推荐阅读