Flexbox 바로 알기(4) :: 'align-items' vs. 'align-self' vs. 'align-content'

처음 css 배울 때 이름이 비슷비슷해서 늘 헷갈렸던 세 가지 속성

`align-items`, `align-self`, `align-content` 한 눈에 비교하기!

 

align-items

내부 자식 요소들을 cross-axis(교차축)를 기준으로 정렬하는 flex 속성.

flex container (부모 엘리먼트)에 속성을 명시할 것!

Flexbox 바로 알기(2) - main axis와 cross axis 상에서 요소 위치 결정하기 :: justify-content, align-items, flex-di

align-self

부모가 자식 요소의 속성을 결정하는 것이 아닌 실제 자식 요소의 위치를 직접적으로 수정할 수 있는 flex 속성.

align-items와 유사하지만 자식 요소 중 하나의 box에만 별개의 position 속성을 설정해줄 수 있다.

 

2번, 3번 box에 각각 다른 스타일을 적용한 결과

 

.container{
    background-color: whitesmoke;
    height: 50vh;
    display: flex;
    justify-content: space-around;
}

.child{
    background-color: bisque;
    width: 100px;
    height: 100px;
    padding: 3px;
}

.child:nth-child(2){
    align-self: center;
}

.child:nth-child(3){
    align-self: flex-end;
}

align-content

cross axis 상에서 1, 2, 3 box 줄과 4, 5, 6 box 줄 사이 간격을 조정한다.

자식 아이템들이 여러 줄에 거쳐서 나올 때, 각 line 사이 간격을 조정하는 flex 속성.

이때 line 간격은 cross axis (사진 상에서는 세로축) 상에서 늘어나고 줄어든다.

 

`align-content: space-around;` ⇒ default 값

`align-content: start;` ⇒ 줄 간격 없이 맨 위로 붙여서 출력

`align-content: center;` ⇒ 줄 간격 없이 가운데로 모아서 출력

`align-content: space-between;` ⇒ 줄 간격 동일하게

 

align-items - CSS: Cascading Style Sheets | MDN

align-self - CSS: Cascading Style Sheets | MDN

align-content - CSS: Cascading Style Sheets | MDN