logo标签列表

如何使用flexbox布局，将一个元素对齐到最左边，另一个元素对齐到最右边，并将另一个元素放置在最右边的下方？

htmlcssflexbox
4

以下是我的代码:

.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%等等，但都没有起作用。
2个回答
3

Flexbox解决方案

这里有一个简单的例子。第一行上的两个项目占据了50%的空间。使用margin-left: auto将最后一个项目推到最右侧。

.container {
  display: flex;
  flex-wrap: wrap;
}

.one, .two {
  flex-basis: 50%;
}

.two {
  text-align: right;
}

.three {
  margin-left: auto;
}
<div class="container">
  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
  </div>  
</div>

网格解决方案

使用 Grid 可以有许多处理这个问题的方式——我选择了这种方式，因为我喜欢使用 grid-template-areas。注意：在 Grid 中使用点 (.) 表示一个空的网格区域。

jsFiddle

.container {
  display: grid;
  grid-template-areas: "one two"
                       ". three";
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.two, .three {
  text-align: right;
}
<div class="container">
  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
  </div>  
</div>

jsFiddle

谢谢！使用 flex-basis 的第一个解决方案完美地解决了问题！ - joe
2
你可以将两个section元素包含在一个div元素中。最初的回答。 

<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>

    <div class="right-content">
        <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>
</div>

记住，两个部分的CSS应该使用display: block;，其中一个位于顶部，另一个位于底部。"Original Answer"翻译成"最初的回答"。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接