코딩/HTML, CSS

justify-content , align-items 사용 예제

코딩쪼렙 2021. 10. 10. 19:49
728x90
  • justify-content (en-US) — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.
  • align-items (en-US) — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성

align-items 속성 

 

<html>      
  <main class="main-screen main-chat">
            <div class="chat__timestamp">
                Tuesday, June 30, 2020


            </div>
        </main>
<css>
.main-chat{
    display: flex;
    flex-direction: column; // 세로축으로 주축 바꾸기
    align-items: center;  //세로축 기준 가운데 정렬
}


0    000
이 아이템들이 교차축기준으로 정렬이 되어있지않다면 align-item:center;


가로축 기준으로 주축이 설정 되어있다면 align : items 가 가로축 기준으로 가운데 정렬이되고
세로축 기준으로 주축이 설정 되어있다면 align: items가 세로축기준으로 가운데 정렬 됨