flex item의 정렬 _ justify-content, align-content,align-items

✏  justify-content

justify-content는 플렉스 아이템들의 주축이 수평일 때 정렬방법을 지정해주는 속성이며
주로 사용되는 flew-start, flex-end, center 세 가지가 있다.

---

1. flex-start

flex-start는 플렉스 아이템들을 시작점으로 정렬 즉 왼쪽 정렬시키는 속성이다.
기본적으로 아이템들은 왼쪽으로 정렬이 되어 있기 때문에 flex-start는 기본값으로 생각하면 된다.

justify-content: flex-start;

2. flex-end

flex-end는 플렉스 아이템들을 끝점으로 정렬 즉 오른쪽 정렬시키는 속성이다.
주축이 변경되지 않기 때문에 순서는 바뀌지 않는다는 것을 알고 있어야 한다.

justify-content: flex-end;

3. center 

center는 플렉스 아이템들을 가운데 정렬시키는 속성이다.

justify-content: center;

 

---

✏ align-content

 

 align-content는 플렉스 아이템들의 주축이 수직일때 여러 줄의 아이템의 정렬방법을 지정해주는 속성이며

stretch. flex-start, flex-end, center 가 주로 사용된다.

align-content를 사용하려면 조건이 있는데 꼭 아이템들이 여러 줄이어야만 작동을 한다.

 

---

1. stretch

 

 stretch는 플렉스 아이템들을 시작점으로 정렬시키는 속성으로 기본값이다.

stretch는 늘린다는 뜻을 가진 단어이다.

만약 아이템의 크기를  width 값만 지정한 후 height값은 지정하지 않았다.

그랬더니 아이템의 크기가 늘려 저서 채워지는 것을 볼 수 있다.

 

그럼 이번에는  width와 height의 값을 둘 다 지정해주겠다.

align-content: stretch;

그랬더니 아이템들이 크기 지정된 속성 값을 가진 후 시작되는 시작점으로 정렬되어 있는 모습을 보였다.

 

 

2. flex-start

 

flex-strat는 아이템들을 시작점으로 정렬 즉 위로 정렬시키는 속성으로 stretch와는 차이점이 있다.

align-content: flex-start;

3. flex-end 

 

flex-end는 아이템들을 끝점으로 아래로 정렬시키는 속성이다.

마찬가지로 주축이 변경되지 않기 때문에 순서는 바뀌지 않는다는 것을 알고 있어야 한다.

align-content: flex-end;

4. center

 

center는 아이템들을 가운데로 정렬시키는 속성이다.

align-content: center;

 

---

✏  align-items 

 

align-items는 플렉스 아이템들의 주축이 수직일때  교차축의 한 줄의 아이템의 각각 줄마다 정렬방법을 지정해주는 속성이며 stretch. flex-start, flex-end, center 가 주로 사용된다.

 

---

1. stretch

 stretch는 플렉스 아이템들을 시작점으로 정렬시키는 속성으로 기본값이다.

align-items: stretch;

height 값이 지정되지 않아 auto로 임의의 값으로 지정되어 아이템들이 늘어나 있는 것을 볼 수 있었다.

 

 

 

2. flex-start

 

flex-start는 아이템들을 줄당 시작되는 시작점으로 정렬 즉 위로 정렬시키는 속성이다.

align-items: flex-start;

3. flex-end

 

flex-end는 아이템을 줄당 끝나는 끝점으로 정렬 즉 아래로 정렬시키는 속성이다.

 

align-items: flex-end;

4.  center

 

center는 아이템을 줄당의 가운데로 정렬시키는 속성이다.

align-items: center;

---

φ(^∇^ )

 

가끔 이렇게 정리하다 보면 읽어도 읽어도 이상한 거 같지 않지만 여러분들 눈에는 뒤죽박죽 이상하다고 보일 수 있어요...

그래도 어느 누군가에게 도움이 될 수 있다면 좋겠네요...!

오늘도 긴 글 읽어주셔서 감사합니다!