Используя flexbox, как я могу выровнять один элемент в крайнем левом, один в крайнем правом, а другой ниже крайнего правого?

Question

Вот мой код:

.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% и т. Д., Но ничего не работает

Answer 1

Вы можете обернуть два элемента 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; для одного сверху, а другого снизу.

Answer 2

Flexbox Solution

Вот простой пример. Оба элемента в первом ряду занимают 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>

jsFiddle

Grid Solution

Есть много способов справиться с этим с помощью Grid - я выбрал этот, потому что мне нравится grid-template-areas. Примечание: точка (.) в сетке представляет пустую область сетки.

.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