使用flexbox,我如何在最左边对齐一个元素,在最右边对齐一个元素,在最右边对齐另一个元素?

时间:2019-03-11 01:33:07

标签: html css flexbox

这是我的代码:

.region-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<div class="region region-footer">

  <nav role="navigation" aria-labelledby="block-mytheme-footer-menu" id="block-mytheme-footer" class="contextual-region">

    <ul class="menu menu--footer nav">
      <li<a href="/about" data-drupal-link-system-path="node/2">About</a>
        </li>
        <li><a href="/contact" data-drupal-link-system-path="contact">Contact</a></li>
        <li> <a href="/privacy-policy" data-drupal-link-system-path="node/6">Privacy Policy</a></li>

    </ul>
  </nav>

  <section data-quickedit-entity-id="block_content/16" id="block-socialmedia" class="contextual-region block block-block-content block-block-content3e0c4d11-72cf-4565-ae42-0da66a2df37d clearfix" data-quickedit-entity-instance-id="0">

    <div data-quickedit-field-id="block_content/16/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
      <div class="social-media">
        <a class="social-a" href="https://twitter.com/">
          <img src="/themes/img/twitter.png">
        </a>
        <a class="social-a" href="https://www.instagram.com/">
          <img src="/themes/img/instagram.png">
        </a>
        <a class="social-a" href="https://dribbble.com/">
          <img src="/themes/img/dribbble.png">
        </a>
      </div>
    </div>
  </section>


  <section data-quickedit-entity-id="block_content/14" id="block-copyright" class="contextual-region block block-block-content block-block-contentd9975090-e973-43a8-bd2d-ec3a21f65f51 clearfix" data-quickedit-entity-instance-id="0">

    <div data-quickedit-field-id="block_content/14/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
      <div class="copyright">
        <p>© MySite 2019</p>
      </div>
    </div>
  </section>

</div>

这是我的网站的外观以及我要实现的目标:https://imgur.com/a/FEa4GVQ

我尝试对每个项目使用align-self,将版权设置为margin-right: auto,将每个元素设置为width: 50%等,但是没有任何作用

0 个答案:

没有答案