More than 3 years have passed since last update.

よくあるヘッダーレイアウト ~FlexBox~

Posted at 2020-07-08

FlexBoxを使うとWEBデザインでよくあるレイアウトを簡単にコーディングすることができます。

<div class="flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

.flex {
  display: flex;
  justify-content: flex-end;
}
.flex > :first-child {
  margin-right: auto;
}

これだけ

justify-content: flex-end はflexアイテムを全て右に寄せる設定です。

この際、Flexアイテムに「margin-right: auto;」の記述を組み合わせると、設定したアイテムの右側に自動的に余白を作ることができます。