Question

我是flexbox的新手，并且每当我加载html页面时都存在一个问题，即justify-content无效。

我使用以下代码：

<html>
  <head>
<style type="text/css">
    .headerElements {
        background-color: #000;
        height: 90px;
        display: flex;
        justify-content: space-between; 
        align-items: center;
    }
    .logo {
        width: 15%; 
        height: 100%;
    }
    .social {
        width:230px;
        height:50px;
    }
</style>
  </head>
  <body>
<div class="container" style="max-width: 600px; height: auto; margin: 0 auto;">
  <header class="headerElements">
    <figure class="logo">
      <img src="http://www.example.com/mailing/mailing/mailing_logo.png" style="width: 100%;">
    </figure>
    <div class="social">
      <a href=""><img src="http://www.example.com/mailing/mailing/mailing_06.png" style="width: 50px; height: 50px;"> </a>
      <a href=""><img src="http://www.example.com/mailing/mailing/mailing_08.png" style="width: 50px; height: 50px;"> </a>
      <a href=""><img src="http://www.example.com/mailing/mailing/mailing_10.png" style="width: 50px; height: 50px;"> </a>
      <a href=""><img src="http://www.example.com/mailing/mailing/mailing_12.png" style="width: 50px; height: 50px;"> </a>
    </div>
  </header>
  </div>
</body>
</html>

这是我在Chrome中检查元素时得到的结果：

div.m1581948eed9ce369 .m_701195392933853285headerElements {
    background-color: #000;
    height: 90px;
    display: flex;
}

对齐内容和对齐项目缺失!!

我可能做错了什么？

这是我收到的当前电子邮件：

这就是我期望收到它的方式：

flexbox中的proty-content无法正常工作

0 个答案: