UI 디자인 요소 (flex) - display, justify-content, align-items 삼대장 사용법

UI 디자인 시, 가운데 정렬을 위한 CSS 요소 적용 방법

CSS 요소

        /* 가로 가운데, 세로 가운데 배치 방법 */
        display: flex;
        justify-content: center;
        align-items: center;

HTML 요소

    <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <span>text</span>
      <span>text</span>
      <span>text</span>
    </div>

적용 후 이미지

flex의 사용법 보기 (개발자 도구 이용)