これが私のコードです：
.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%などしてみましたが、何も機能していません
これは簡単な例です。最初の行の両方のアイテムがスペースの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-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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加