728x90
- justify-content (en-US) — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.
- align-items (en-US) — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성
| <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가 세로축기준으로 가운데 정렬 됨
'코딩 > HTML, CSS' 카테고리의 다른 글
| 중앙 정렬 방법, header 정렬 (0) | 2021.10.11 |
|---|---|
| BEM / Block, Element, Modifier (0) | 2021.10.11 |
| atrribute selector, pesudo selector (0) | 2021.10.06 |
| 컬러를 변수에 넣기 :root (0) | 2021.10.06 |
| position: relatvie; position: absolute; (0) | 2021.10.05 |