[CSS3] flex item의 정렬과 간격 / justify-content / align-content / align-items 속성

1. justify-content

---

CSS

justify-content:    flex-start [기본값] | flex-end | center | space-between | space-around | space-evenly        .flex-item { justify-content: center; }

 

 

flex item의 ‘진행 축’ 정렬과 간격을 제어하는 ‘justify-content’.

justify-content 속성은 ‘진행 축’ 정렬과 아이템 사이의 간격을 제어합니다. 

flex-direction: row | row-reverse 인 경우 x축 정렬을 제어합니다. 

flex-direction: column | column-reverse 인 경우 y축 정렬을 제어합니다.

 

 

 

 

 

 

 

---

2. align-items

---

CSS

align-items:  flex-start | flex-end | center | baseline | stretch [기본값]      .container { display: flex; align-items: flex-start; }

 

 

flex item의 ‘교차 축’ 정렬을 제어하는 ‘align-items’.

align-items 속성은 진행 축과 교차하는 ‘교차 축’ 정렬을 제어합니다. 여기서부터 조금 헷갈리기 쉬워요.

flex-direction: row | row-reverse 인 경우 y축 정렬을 제어합니다.

flex-direction: column | column-reverse 인 경우 x축 정렬을 제어합니다.

 

 

 

 

 

baseline stretch

 

 

flex-wrap:wrap 속성에 의해 여러 줄( **multi line )이 발생하는 경우 여러 줄의 정렬과 간격을 제어하는 align-content 속성의 값( flex-start, flex-end, center, space-between, space-around)에 따라 align-items 정렬은 무시됩니다. baseline 값은 flex item의 폰트 사이즈와 줄 간격( *line-height )이 모두 동일한 경우 flex-start 값과 동일한 결과를 보여주지만, 폰트사이즈 또는 줄 간격*을 flex item 마다 다르게 설정하면 포함하고 있는 문자열의 baseline 기준으로 정렬합니다. baseline을 쓸 일은 별로 없을 것 같은 생각이 드네요.

 

 

 

---

3. align-content

---

CSS

align-content:  flex-start | flex-end | center | space-between | space-around | stretch      .flex-container { align-content: space-around; }

 

 

flex item의 ‘여러 줄 교차 축’ 정렬과 간격을 제어하는 ‘align-content’

align-content 속성은 여러 줄**의 ‘교차 축’ 정렬과 줄 사이 간격을 제어합니다**. 여러 줄이 발생하는 경우( flex-wrap:wrap)에만 적용되고, 여러 줄이 발생하는 경우 align-items의 교차 축 정렬보다 적용 우선순위가 높습니다.

 

 

 

align-items 속성과 align-content 속성에서 이해하기 어려운 부분은 “왜 두 속성을 분리했는가?” 입니다. 양쪽 모두 교차 축 정렬에 관여하고 있으며 동일한 값( stretch, center, flex-start, flex-end)을 사용하기 때문에 하나의 속성으로 통일하는 것이 가능해 보였거든요.

align-items인 경우 stretch 값의 표현이 flex item 박스를 교차축으로 끝까지 잡아 늘리는데 반해서, align-content인 경우 stretch 값의 표현은 flex item 박스의 교차축 크기는 변경하지 않고 교차축으로 줄 사이의 간격을 균등하게 벌어지게 만드는 점이 다르기는 합니다.

한 줄 또는 여러 줄 사이 교차축으로 빈 공간 없이 flex item을 가득 채우려면 align-items:stretch; align-content:stretch; 이렇게 두 속성 모두 값을 stretch로 처리하면 됩니다.

사실 align-items와 align-content의 기본값이 모두 stretch 이기 때문에 교차 축으로 width, max-width, height, max-height 속성을 사용하지 않았다면 교차축으로 빈 공간 없이 flex item이 채워지게 되어 있습니다. 위 예제는 교차축 줄 사이 간격을 테스트하기 위해 width, height 값을 사용했습니다.

 

 

 

 

 

 

 

 

[CSS display:flex 이용하여 가운데 정렬하기]

 

[CSS3] display:flex / flexible 레이아웃 / HTML 요소 가운데 정렬하는 방법 7가지

 

 

 

 

 

 

 

[flex-direction / flex-wrap / flex-flow]

- 아래 이미지를 클릭하면 링크로 이동합니다 -

 

 

 

 

 

 

 

 

[참고 사이트]

https://bit.ly/35L3HQO