両端に要素を配置する

カルメラ焼き 
<style>
  .ryotan {
    display: flex;
    justify-content: space-between;
  }
  .left-area {
    width: 20px;
    height: 20px;
    background-color: red;
  }
  .right-area {
    width: 20px;
    height: 20px;
    background-color: blue;
  }
</style>

<body>
  <div class="ryotan">
    <div class="left-area"></div>
    <div class="right-area"></div>
  </div>
</body>

両端に要素を配置したい場合は、「justify-content: space-between」を使用する。


この記事が気に入ったらサポートをしてみませんか？