e:I[86069,["6841","static/chunks/app/p/%5Bid%5D/page-4bec94ee790807ae.js"],"default"] f:T7dc,$$config title: ?align-self? keywords: - IT - flex - align-self - align-self:stretch; - align-self:flex-start; - align-self:flex-end; - align-self:center; - align-self:baseline; $$ # flex ## display:flex; - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 - 요소의 크기가 정확하지 않거나, 반응형일 때 유용하게 사용 가능 - 정렬, 방향, 크기, 순서 모두 css만으로 유연하게 조절할 수 있기때문에 다양한 레이아웃을 보다 쉽게 구현 가능 ## align-self - align-self - align-items의 아이템 버전입니다. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬 - 기본값은 auto로, 기본적으로 align-items 설정을 상속 align-self는 align-items보다 우선, 전체 설정보다 각각의 개별 설정이 우선 - auto외의 나머지 값들은 align-items와 동일합니다. - :flex-start; - :flex-end; - :center; - :space-between; - :space-around; - :space-evenly; ## 예시 ```html

``` $$codepen https://codepen.io/dhwlduswlddj