CSS Flexbox : Align-items 속성값 (Flex-start, Flex-end, Center, Baseline, Stretch)

지난시간까지는 Flexbox의 기본성질인 Justify-content에 대해 알아 보았습니다. 상위 Class 영역내에서 왼쪽 상단 모서리부터 시작이 되는 기본성질이었습니다. 아울러, 상위 Class영역안에서만 하위 Class 항목이 유연하게(flexible) 조절된다는 것도 이해 하였습니다. 

 

이제는 수직적으로 배치하는 성질에 대해 알아볼 시간입니다. 

 

역시 본 강의 또한 Codecademy에서 무료로 배우고 있습니다. 물론 영어로 되어 있지만 초보들에겐 좋은 강의인것 같습니다. 이외 여러가지 사이트에서 무료로 강좌를 열고 있네요. 참 고마운 분들입니다. (특히 baseline을 이해하는데는 다른 여러강좌를 참조했네요)

---

 

▒ Align-items 속성

 

 

Align-items의 속성값에 대하여 지난 시간 박스예제를 가지고 연습해 보겠습니다. 

 

지난시간 CSS는 다음과 같았고 브라우저는 다음과 같이 보여졌습니다. CSS에서 상위 Calss (container)를 박스를 center에 놓고 진행해 보겠습니다. 

 

 

 

① Flex-start

 

align-items속성의 flex-start 속성값은 수직이 기준입니다. 따라서 수직 맨위에 변화없이 배치가 됩니다. 이제 HTML에서 id값으로 지정하는 방법은 아실겁니다. 

 

CSS에서 다음과 같이 추가하고 flex-start 속성값을 주겠습니다. 

 

 

그러면 브라우저값은 변화가 없습니다. 이유는 수직 정렬 속성이기 때문입니다. 

 

---

 

② Flex-end 

 

이제 이 속성값은 수직으로 container 영역안에서 밑을 기준으로 배치됩니다. 한번 개인적으로 해 보시죠. 브라우저는 다음과 같이 나타납니다. 

 

 

 

---

 

③ center

 

이제 수직적으로 중앙에 배치되는 속성값입니다. 다음과 같이 브라우저에서 표시됩니다. 

 

 

---

 

④ baseline

 

baseline 속성값은 모든 요소들의 밑변 기준으로 정렬합니다. 현재 속성에서 baseline을 해보면 flex-start와 차이가 없을겁니다. 한번 CSS와 브라우저를 보시죠.

 

 

 

 

 

이해를 돕기 위해 다른 예제로 각 박스별 Class명을 넣어 다음과 같이 HTML을 만들어 보겠습니다. 

 

 

상위 Class(container)의 영역(노란색)은 하위 Class(left, center, right)의 영역에 영향을 미친다고 하였죠. container에 dispaly값을 flex로 주고 justify-content: center;로 지정을 하면 하위 Class의 3개의 박스가 가운데 정렬이 되지요.

 

CSS에서 다음과 같이 스타일링을 하면 

 

 

브라우저는 다음과 같이 나타나겠죠.

 

 

그런데 만일 하위 Class에 높이를 지정하지 않으면 아래 그림과 같이 상위 Class의 영역만큼 늘어납니다. 이유는 상위 Class의 높이 영역이 하위 Class에도 영향을 미치기 때문입니다. 

 

 

마찬가지로 박스 3개를 다시 모두 최소높이(min-height)를 75px로 통일되게 지정을 하겠습니다. CSS는 다음과 같습니다. 

 

 

그러면 최소높이기때문에 stretch의 효과가 다음과 같이 브라우저에 디스플레이됩니다. (글씨크기를 일부러 다르게 했습니다.)

 

 

여기에다 baseline속성값을 다음과 같이 줍니다. 

baseline은 박스의 블록형태에서 contents(여기서는 숫자)의 밑줄 기준으로 정렬이 됩니다. 파란박스가 어떻게 배치되는지 한번 보시죠.

 

먼저 CSS입니다. 

 

 

 

이에따라 브라우저는 다음과 같이 정렬됩니다. 빨간선처럼 글씨의 baseline에 맞추어 정리가 되고 이에 따라 파란 박스의 영역이 재 배치됩니다. 

 

 

---

 

⑤ stretch

 

stretch 속성값은 말 그대로 맨위부터 아래까지 스트레치되는 현상입니다. 이럴경우 정확한 높이값을 주면 변하지 않으나 최소높이를 주면 container 영역까지 펼쳐집니다. (기본값이라고도 합니다. 참조하세요)