css 的某些部分在添加 flex 后渲染

Question

我正在开发一个博客，我最近添加了一个 div 元素和 display: flex; 以使元素出现在同一行中。

但是，在每次加载页面时进行此更改后，元素会向右移动一点，字体加载有点晚。这种情况只会发生一段时间，在页面加载后它们都会回到预期的位置。

注意：这不会出现在我的本地主机上，而只会出现在生产版本中（或部署时）

请观看下面的视频亲自观看：

https://imgur.com/XY0SHPM

或者如果在桌面上亲自见证：https://lucid-brown-a29dc1.netlify.app/

JSX

<li>
        <Link to={slug} key={slug} className="link">
            
          <h1 className="title">
            {title}
          </h1>
          
          <p className="meta">
            <span>
              <FaCalendar size={18} /> {prefix}
              </span>
            
            <div className="tags">
              {tags && tags.map(tag =>
                <Link to={`/tag/${tag.split(" ").join("-").toLowerCase()}`}>
                  <span key={tag}> <FaTag size={18} /> {tag} </span>
                </Link>
              )}
            </div>
          </p>
          
          <p> {excerpt}</p>
        </Link>
</li>

对应的css：

<style jsx>{`
        :global(.link) {
          width: 100%;
          color: ${theme.text.color.primary};
        }
        li {
          border: 1px solid transparent;
          // border-radius: ${theme.size.radius.default};
          margin: ${theme.space.l} 0 ${`calc(${theme.space.l} * 3)`};
          padding: ${theme.space.inset.s};
          position: relative;
          transition: all ${theme.time.duration.default};
          background: transparent;
          
          &::after {
            // border-top: 1px solid ${theme.line.color};
            content: "";
            height: 0;
            position: absolute;
            bottom: ${`calc(${theme.space.default} * -1.5)`};
            left: 50%;
            transform: translateX(-50%);
            transition: all ${theme.time.duration.default};
            width: 50%;
          }
          &:first-child {
            margin-top: 10px;   
          }
          &:last-child {
            margin-bottom: 10px;
          }
        }
        .title {
          padding: ${theme.space.m} ${theme.space.s} 0;
          line-height: ${theme.blog.h1.lineHeight};
          font-size: ${theme.blog.h1.size};
          text-remove-gap: both;
          :global(.arrow) {
            display: none;
            position: relative;
            top: 7px;
          }
        }
        .meta {
          // display: block;
          font-size: 0.8em;
          padding: ${theme.space.s} ${theme.space.s};
          margin: ${theme.space.m} 0;
          background: transparent;
          .tags {
            display: flex;
            flex-flow: row wrap;
            // flex-shrink: 0;
          }
          :global(svg) {
            // fill: ${theme.icon.color};
            fill: ${theme.text.color.primary};
            opacity: 0.5;
            margin: ${theme.space.inline.xs};
            position: relative;
            bottom: -0.4em;
          }
          span {
            // align-items: baseline;
            // display: flex;
            text-transform: uppercase;
            margin: ${theme.space.xs} ${theme.space.s} ${theme.space.xs} 0;
            font-size: 0.8em;
          }
        }
        p {
          line-height: 1.5;
          padding: 0 ${theme.space.s};
          text-remove-gap: both;
        }
        @from-width tablet {
          li {
            margin: ${`calc(${theme.space.default} * 3)`} 0 ${theme.space.xl};
            padding: ${theme.space.default};
            &::after {
              bottom: ${`calc(${theme.space.default} * -2)`};
            }
            &:first-child {
              &::before {
                top: ${`calc(${theme.space.default} * -1.75)`};
              }
            }
          }
          .title {
            font-size: ${`calc(${theme.blog.h1.size} * 1.2)`};
            padding: ${`calc(${theme.space.default} * 1.5) ${theme.space.default} 0`};
            transition: all 0.5s;
          }
          .meta {
            
            padding: ${theme.space.default} ${theme.space.default};
          }
          p {
            padding: 0 ${theme.space.default};
          }
        }
        @below desktop {
          li {
            border: 1px solid ${theme.line.color};
            box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
            margin-top: 20px;
            margin-bottom: 20px;
            
            &:first-child {
              margin-top: 0;
            }
            &::after {
              border-top: 0px;
            }
          }
        }
        @from-width desktop {
          li {
          
            margin: 0 0 0;
            padding: 0 0 ${theme.space.l};
            &::after {
              bottom: ${`calc(${theme.space.default} * -1.5)`};
            }
            &:first-child {
              &::before {
                top: ${`calc(${theme.space.default} * -2.75)`};
              }
            }
          }
          :global(.blogItemLink:first-child) > li::before {
            top: ${`calc(${theme.space.default} * -2.75)`};
          }
          .title {
            font-size: 2.5em;
            padding: ${`calc(${theme.space.default} * 1.2)`} ${theme.space.l} 0;
          }
          .meta {
          
              padding: 0 ${theme.space.l} 0;
          }
          p {
            padding: 0 ${theme.space.l} 0;
          }
          li {
            &:hover {
              border: 1px solid ${theme.line.color};
              box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
              &:after {
                bottom: ${`calc(${theme.space.default} * -2.5)`};
              }
              :global(.gatsby-image-wrapper) {
                transform: scale(1.1);
              }
              .title {
                color: ${theme.blog.h1.hoverColor};
              }
          
            }
          
          }
        }
        @media (hover: hover) {
          .meta {
            :global(a svg) {
              transition: all 0.5s ease-in-out;
              -webkit-transition: all 0.5s ease-in-out;
              -moz-transition: all 0.5s ease-in-out;
            }
            :global(a:hover svg) {
              transition: all 0.5s ease-in-out;
              -webkit-transition: all 0.5s ease-in-out;
              -moz-transition: all 0.5s ease-in-out;
              transform: scale(1.3);
              color: ${theme.color.brand.primary};
            }
          }
        }
      `}</style>

到目前为止我已经尝试过：

• 将 div 更改为 span 但这会使标签与上面的前缀对齐
• 删除了flex，但我还能如何将项目连续对齐？
• 试图通过删除复杂的计算来提高 css 性能
• 读到应该使用grid 而不是flex，但看起来grid 不可用（也许需要使用一些css 框架？）
• 我还观察到字体颜色比页面加载稍晚，所以这可能与 flex 根本无关，我只是在找错树？

我是一个 CSS 新手，所以我可能没有在这里使用最佳实践。在此处粘贴整个 CSS，因为我无法找到问题的原因。是因为 flex box 性能很重吗？我该如何缓解这种情况？

如果有人想阅读整个代码：https://github.com/amita-shukla/blog-1/blob/master/src/components/Blog/Teaser.js

Answer 1

FOUC（Flash OF Unstyled Component）来自多个来源。在您的情况下，我猜想将 CSS 作为 JSX 组件 <style jsx> 加载会阻止样式的呈现，直到它们被浏览器解析。请记住JavaScript is a render-blocking。此外，您的代码的最终行为应在gatsby build 环境中进行测试。

在浏览器可以呈现页面之前，它必须通过解析 HTML 标记来构建 DOM 树。在此过程中，每当解析器遇到脚本时，它必须停止并执行它，然后才能继续解析 HTML。

尝试将样式添加为Gatsby docs suggest:

• Global CSS Files：网站样式的传统方式。 CSS 规则是全局声明的，样式的应用取决于具体性和继承性。
• Modular Stylesheets：CSS 规则是传统编写的，但使用 JavaScript 并在本地范围内使用，以避免在其他地方出现意外的副作用。与 Gatsby 开箱即用。
• CSS-in-JS：用 JavaScript 编写和使用的局部范围的 CSS，可以更轻松地使用动态样式和其他功能。需要使用第三方库。

作为初始方法，我建议使用 CSS 文件：

import './styles.css'
// other imports


<li>
        <Link to={slug} key={slug} className="link">
            
          <h1 className="title">
            {title}
          </h1>
          
          <p className="meta">
            <span>
              <FaCalendar size={18} /> {prefix}
              </span>
            
            <div className="tags">
              {tags && tags.map(tag =>
                <Link to={`/tag/${tag.split(" ").join("-").toLowerCase()}`}>
                  <span key={tag}> <FaTag size={18} /> {tag} </span>
                </Link>
              )}
            </div>
          </p>
          
          <p> {excerpt}</p>
        </Link>
</li>

假设 styles.css 与你的 React 组件在同一个文件夹中。在那里，在你的styles.css：

:global(.link) {
  width: 100%;
  color: ${theme.text.color.primary};
}
li {
  border: 1px solid transparent;
  // border-radius: ${theme.size.radius.default};
  margin: ${theme.space.l} 0 ${`calc(${theme.space.l} * 3)`};
  padding: ${theme.space.inset.s};
  position: relative;
  transition: all ${theme.time.duration.default};
  background: transparent;
  
  &::after {
    // border-top: 1px solid ${theme.line.color};
    content: "";
    height: 0;
    position: absolute;
    bottom: ${`calc(${theme.space.default} * -1.5)`};
    left: 50%;
    transform: translateX(-50%);
    transition: all ${theme.time.duration.default};
    width: 50%;
  }
  &:first-child {
    margin-top: 10px;   
  }
  &:last-child {
    margin-bottom: 10px;
  }
}
.title {
  padding: ${theme.space.m} ${theme.space.s} 0;
  line-height: ${theme.blog.h1.lineHeight};
  font-size: ${theme.blog.h1.size};
  text-remove-gap: both;
  :global(.arrow) {
    display: none;
    position: relative;
    top: 7px;
  }
}
.meta {
  // display: block;
  font-size: 0.8em;
  padding: ${theme.space.s} ${theme.space.s};
  margin: ${theme.space.m} 0;
  background: transparent;
  .tags {
    display: flex;
    flex-flow: row wrap;
    // flex-shrink: 0;
  }
  :global(svg) {
    // fill: ${theme.icon.color};
    fill: ${theme.text.color.primary};
    opacity: 0.5;
    margin: ${theme.space.inline.xs};
    position: relative;
    bottom: -0.4em;
  }
  span {
    // align-items: baseline;
    // display: flex;
    text-transform: uppercase;
    margin: ${theme.space.xs} ${theme.space.s} ${theme.space.xs} 0;
    font-size: 0.8em;
  }
}
p {
  line-height: 1.5;
  padding: 0 ${theme.space.s};
  text-remove-gap: both;
}
@from-width tablet {
  li {
    margin: ${`calc(${theme.space.default} * 3)`} 0 ${theme.space.xl};
    padding: ${theme.space.default};
    &::after {
      bottom: ${`calc(${theme.space.default} * -2)`};
    }
    &:first-child {
      &::before {
        top: ${`calc(${theme.space.default} * -1.75)`};
      }
    }
  }
  .title {
    font-size: ${`calc(${theme.blog.h1.size} * 1.2)`};
    padding: ${`calc(${theme.space.default} * 1.5) ${theme.space.default} 0`};
    transition: all 0.5s;
  }
  .meta {
    
    padding: ${theme.space.default} ${theme.space.default};
  }
  p {
    padding: 0 ${theme.space.default};
  }
}
@below desktop {
  li {
    border: 1px solid ${theme.line.color};
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
    margin-top: 20px;
    margin-bottom: 20px;
    
    &:first-child {
      margin-top: 0;
    }
    &::after {
      border-top: 0px;
    }
  }
}
@from-width desktop {
  li {
  
    margin: 0 0 0;
    padding: 0 0 ${theme.space.l};
    &::after {
      bottom: ${`calc(${theme.space.default} * -1.5)`};
    }
    &:first-child {
      &::before {
        top: ${`calc(${theme.space.default} * -2.75)`};
      }
    }
  }
  :global(.blogItemLink:first-child) > li::before {
    top: ${`calc(${theme.space.default} * -2.75)`};
  }
  .title {
    font-size: 2.5em;
    padding: ${`calc(${theme.space.default} * 1.2)`} ${theme.space.l} 0;
  }
  .meta {
  
      padding: 0 ${theme.space.l} 0;
  }
  p {
    padding: 0 ${theme.space.l} 0;
  }
  li {
    &:hover {
      border: 1px solid ${theme.line.color};
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
      &:after {
        bottom: ${`calc(${theme.space.default} * -2.5)`};
      }
      :global(.gatsby-image-wrapper) {
        transform: scale(1.1);
      }
      .title {
        color: ${theme.blog.h1.hoverColor};
      }
  
    }
  
  }
}
@media (hover: hover) {
  .meta {
    :global(a svg) {
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
    }
    :global(a:hover svg) {
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      transform: scale(1.3);
      color: ${theme.color.brand.primary};
    }
  }
}

注意：当然要更改基于 CSS 的变量。或者，使用样式组件。

请记住，如果您想添加 global styles，最简单的本地方法是使用 gatsby-browser.js 文件：

import "./src/styles/global.css"

// or:
// require('./src/styles/global.css')