align-self
-
[CSS] flex 관련 짧은 팁개발/HTML CSS 2022. 1. 31. 19:37
flex를 이용하면 메인 축이 row일 때 가로 방향으로 아이템들을 편하게 정렬할 수 있습니다. 만약 텍스를 div 태그로 감싸서 정렬한다고 했을 때 column 방향에서는 무슨 일이 일어날까요? 컨텐츠 크기만큼 자동으로 잡아주는 것일까요. 다음 예제는 MDN에 나와 있는 것입니다. 같이 확인해봅시다. One Two Three has extra text more .box { display: flex; --align-items: flex-end; justify-content: space-around; } .box > div { border: 1px solid red; } .box :first-child { --align-self: center; } 위 코드는 아래처럼 페이지에 표시됩니다. flex-dire..