CSS Flexbox : Flex 속성축약, Flex-wrap, Align-content

지난시간까지 Flex-grow, Flex-shrink, Flex-basis의 3가지 속성에 대해 연습해 보았습니다. 이 3가지를 다음과 같이 CSS에서 나타낸다고 가정해 보겠습니다. 

 

 

이럴 경우 순서대로 다음과 같이 나타낼 수 있습니다.

 

 

이는 속성값만 표시하면 grow, shrink, basis 순으로 CSS는 인식한다는 이야기입니다. 

 

그렇다면 다음은 무엇을 뜻할까요?

 

 

정답은 Flex-grow값과 Flex-shrink값입니다. 

 

그렇다면 다음은요?

 

 

정답은 Flex-grow와 Flex-basis 값입니다. 

 

그런데 기억해야 될 사항은 Flex-shrink와 Flex-basis에 대한 속성 축약은 없습니다. 

 

---

 

▒ Flex-wrap

 

상위 Class(Container)의 영역이 하위 Class(contents)영역보다 작을 경우 자동으로 contents가 줄어 드는 경우가 있습니다. 이런 경우를 피하기 위하여 Flex-wrap 속성을 사용합니다. 

 

다음 예를 가지고 Flex-wrap의 속성에 대해 알라 볼까 합니다. 

 

녹색영역이 상위영역이고, 분홍색이 5개의 Contents라고 가정해 보겠습니다. 

 

 

위 그림에 대한 HTML과 CSS를 만들 수 있겠지요?

 

여러가지 방법이 있을 수 있습니다. 한번 만들어 보시기 바랍니다. Flex-wrap의 속성값은 wrap, wrap-reverse, nowrap으로 나뉘어지는데 각 속성값에 대하여 보도록 하갰습니다. 

 

<Case 1: flex-wrap: wrap>

 

Container에 Flex-wrap: wrap 속성을 주도록 하겠습니다. 속성값 wrap은 container의 영역 변화에 따라 contents 박스의 사이즈에 변화를 주지않고 전체를 감싸게 됩니다. 상기 예제에서 Container 영역이 줄어 들면 contets 박스가 줄 바꿈을 하게 됩니다. 저는 CSS를 다음과 같이 해 보았습니다. 

 

 

브라우저는 다음과 같습니다. 

 

 

 

여기서 브라우저의 크기를 줄여 보겠습니다. 

 

 

상기 그림은 Container 영역안에 Contents가 크기 변화없이 들어와야 하기때문에 5번 박스가 먼저 두번째 줄에 내려오고 다음 4번 박스 순으로 내려옵니다. 완전히 줄이면 1번부터 5번까지 수직으로 정렬이 됩니다. 

 

<Case 2: flex-wrap: wrap-reverse>

 

wrap-reverse 속성값은 wrap 속성값의 반대입니다. 브라우저를 줄이면 5번 박스가 1열에 남고 나머지 1 ~ 4번 박스가 두번째 열에 다음과 같이 위치합니다. 

 

 

 

좀 더 줄이면 5번 4번 박스가 1열에 위치 하겠죠.

 

 

 

<Case 3: flex-wrap: nowrap>

 

Wrapping 이 일어나지 않는 속성값입니다. 

 

nowrap속성값을 주고 브라우저를 줄여 보겠습니다. 

 

 

이제 이해가 쉬울겁니다. 

 

---

 

▒ Align-content

 

Align-content와 Align-items의 속성차이를 먼저 알아 볼 필요가 있습니다. Align-items는 지난번 한줄 열의 박스를 수직으로 배치할 때 사용했습니다. 이런한 Contents들이 여러 줄이 있을때 사용하는 속성이 Align-content라고 보면 됩니다. 

 

이 경우 Flex-wrap속성이 wrap으로 되어 있어야 이해 하기가 편합니다. 

 

다음과 같이 CSS를 작성 하겠습니다. 

 

 

그러면 브라우저는 container가 wrap으로 되어 있기때문에 5개의 박스 요소들의 크기 변화없이 다음과 같이 배치됩니다. 이럴 경우 Align-content를 사용합니다. 

 

 

기본으로 알아야 할 6가지의 속성값이 있는데 이전 시간에 사용했던 Flex-start, Flex-end, Center, Space-between, Space-around 값을 알아 보겠습니다. 

 

<Case 1: Flex-start 속성 값>

 

이 값은 왼쪽 상단 모서리 기준의 속성값을 그대로 나타냅니다. 

 

 

<Case 2: Flex-end 속성값>

 

 

 

<Case 3: Center 속성값>

 

 

 

참고로 위 그림을 정중앙으로 배치하고자하면 jusify-content: center로 하면 됩니다. 

 

<Case 4: Space-between 속성 값>

 

두 열의 공간을 잡고 위 아래로 배치를 하게 됩니다. 

 

 

 

<Case 5: Space-around 속성값>

 

이 속성값은 각 박스의 위 아래의 여백을 같이 배정하는겁니다. 

 

 

<Case 6: Stretch 속성 값>

 

Stretch는 기본적으로 박스의 높이가 지정이 되지 않거나 최소 높이가 지정이 될 때 사용합니다. CSS에서 다음과 같이 최소 높이와 Stretch 속성 값을 주겠습니다. 

 

 

그러면 브라우저는 스트레치가 됩니다. 

 

 

 

---

 

위 아래 수직으로 움직이는 속성은 Align-items와 Align-content라는 것만 기억하고 다음 시간에 다른 Flexbox 개념을 익히도록 하겠습니다.