Fluid layouts with Flexbox

이번시간에는 배열하는 방법 중 하나인 flex, 플렉스에 대해 배워 보도록 하겠습니다.
flex, 플렉스가 등장하기 전에 있었던 여러 문제점들은 flex, 플렉스를 사용함으로써 해결할 수 있습니다.

flex, 플렉스가 어떤 문제들을 해결 하였는지를 살펴 보도록 하겠습니다. 
박스 3개를 만든 후, 배경색은 빨간색, 폭은 200px, 높이는 200px로 설정하고,

 

 

디스플레이는 inline-block으로 설정 하겠습니다.

 

 

여기서 박스를 더 추가 하게 되면,

 

 

박스들이 inline-block 디스플레이 형태로 나란히 옆으로 나열되는 것이 아니라,
박스들이 자리를 충분히 차지했다면, 아래쪽으로 이어 붙는다는 것을 확인할 수 있습니다. 

이러한 문제점 뿐만 아니라, 여기에 margin을 넣어주면,

 

 

자동으로 완성되는 그리드, grid, 눈금자가 없기 때문에, 맨 오른쪽과 왼쪽의 margin 간격이 다릅니다.
다시 말해, flex, 플렉스가 있기 전에는 이런 문제점을 해결 할 그리드, grid, 눈금자가 없었습니다. 

또한, 창을 줄이거나 폰 등 다른 기기로 지금 상태를 확인 한다면, 다른 모습으로 출력 되어 보입니다.

 

 

 

게다가 상자들을 가운데로 이동 시키려면 margin, 마진을 조정해야 되는 불편함이 있습니다.
이러한 다양한 문제점을 바로 flex, 플렉스가 해결하도록 도와줍니다.

그럼 지금부터 flex, 플렉스를 활용하는 방법에 대해 알아 보겠습니다.
먼저, father, 부모 class, 클래스를 만들고, 그 안에 박스 세 개를 만들겠습니다.

 

 

그런 다음, 박스의 디스플레이 inline-block를 지우고, 이제는 child박스에는 직접적으로 적용하지 않습니다.

 

 

즉, flex, 플렉스는 child 박스에 적용하지 않고, 오직 부모 class에 적용 시킵니다.

따라서, father, 클래스를 이용하여, flex 컨테이너로 만들어 부모, father 클래스에만 명령을 합니다.
이에 따라 chid 박스들에게는 이동 방향에 관해 일일이 명령하지 않습니다.  

예를 들어, 부모 클래스의 디스플레이를 flex, 플렉스로 입력하는 순간, child 박스에 바로 적용이 됩니다. 
박스의 디스플레이를 inline-block으로 적지 않았지만, inline-block 형태로 출력이 됩니다.
(child박스의 margin-right도 지워 주었습니다)

 

 

여기서, flex, 플렉스를 지우는 순간, 모든 박스들이 block이 되어 버리고,

 

 

flex, 플렉스를 다시 입력하면, 디스플레이를 inline-block이라고 입력하지 않더라도, inline-block이 됩니다.

 

 

 

상자들을 가운데로 이동 시키려면 margin, 마진을 조정해야 되는 불편함이 있다고 말씀 드렸습니다.
이러한 문제점을 해결하기 위해 flex, 플렉스의 도움을 받을 수 있습니다. 
그럼 justify-content: center를 작성해서 살펴 보겠습니다.

 

 

상자가 좌우 한 가운데로 이동한 것을 확인할 수 있습니다.

좌우뿐만 아니라, align-items: center를 작성하면, 상하 가운데 정렬도 가능합니다.
여기에, 창 자체의 높이와 father, 부모상자의 높이를 100%라고 추가적으로 입력해야 됩니다.

 

 

 

앞서, 창 자체의 높이와 father, 부모상자의 높이를 100%라고 추가적으로 입력했기 때문에,
align-item: flex-end로 작성하면, 박스가 맨 아랫쪽에 위치해 있는 것을 확인할 수 있고,

 

 

align-item: flex-start로 작성하면, 박스가 맨 위쪽에 위치해 있는 것을 확인할 수 있습니다.

 

 

그리고 justify-content: space-between로 변경해 보면, 상자 사이 간격이 동일하도록 조정된 것을 확인할 수 있습니다.

 

 

justify-contet: space-around라고 작성하면, 사이의 간격과 함께 양 끝의 간격도 동일하게 조정이 됩니다.

 

 

정리하면, justify-contet는 좌우, 수평으로 조정, align-item은 상하, 수직으로 조정된다고 할 수 있습니다.

이번에는 flex, 플렉스를 이용하여, 박스들이 수평 가운데와 아랫쪽으로 나열 되길 원하면서(block형태),
justify-contet: center; align-items: flex-end;를 각각 변경하면,

 

 

맨 아랫면 중앙에 박스 세개가 붙어서 나열되어 있다는 것을 확인할 수 있습니다.

flex-direction: column을 추가 입력하면,

 

 

열, column안에 박스들이 수평하게 나열되지 않고, 수직으로 나열되어 있는 것을 확인할 수 있습니다.

반면, flex-direction: row는 default 값으로, justify-content는 수평으로, align-item은 수직으로 적용됩니다.

 

 

정리하면, flex-direction: cloumn은, justify-content가 수직으로, align-item은 수평으로 적용됩니다.
따라서 align-item: center로 입력하면, 수평한 채로 나열되고, 가운데에 정렬이 되는 것입니다.

 

 

다시 말해, flex, 플렉스는 child박스에 작성하지 않고, 부모, father박스에만 작성하고, 적용합니다. 
위와 같은 유용한 flex, 플렉스의 기능을 쉽게 사용하기 위해, display: flex를 선언하는 것입니다.

 

 

 

이번에는 father, 부모 박스 아래에 있는 box들을 추가하고,
flex-direction: row, justify-content: space-between, align-item: flex-start라고 입력해 보겠습니다.

 

 

그리고 child박스들에게 border: 1px solid black을 적용 하면,

 

 

flex 컨테이너 때문에, 창의 크기를 조절함에 따라, 박스들의 크기가 조절 되는 것을 확인할 수 있습니다. 
flex 컨테이너는 창에 맞춰서 폭이 조정되기 때문에, 창을 줄이면 그 창에 맞춰서 폭이 줄어듭니다.

만약 박스를 옆으로 나열한 후, 설정한 폭을 줄이는 것이 아니라,
설정한 폭을 적용하면, 박스들의 나열을 아랫쪽으로 내리고 싶다면, flex-wrap: wrap을 입력하면 됩니다.

 

 

그럼 그리드, grid, 눈금자가 만들어지고, 창에 따라 아래에 새로운 줄이 형성되는 것을 확인할 수 있습니다.

조금 전 사용한 flex-wrap의 default값은 no wrap으로,

 

 

설정한 폭을 무시한 채 크기를 줄이고, 화면 창에 맞춰 한 줄에 나란히 옆으로 나열합니다.

따라서, no wrap을 다시 warp으로 바꾸면, grid, 그리드를 다시 볼 수 있습니다.
즉, 화면창 변화에 관계 없이, 원래 설정한 폭을 그대로 유지하고, 남은 상자들은 아랫줄에 나열합니다. 

이번에는 박스 10개에 숫자를 1부터 10까지 입력해 보겠습니다.

 

 

박스들을 display: flex에다가, 숫자는 가운데 정렬, 색상은 하얀색으로 설정 하겠습니다.

 

 

모든 박스들을 flex 컨테이너로 만듦으로써, 숫자들이 한 번에 움직이게 됩니다. 

그럼 여기서, flex-direction: row-reverse로 입력하면,

 

 

숫자가 1부터 10까지 나열되는 것이 아니라, 반대로 10부터 1까지 출력됩니다.
이처럼 하나, 하나 입력을 다시 할 필요 없이, flex의 방향을 바꿔, 숫자의 나열을 바꿀 수 있습니다. 

그럼 이번에는 flex-direction: column-reverse로 입력하면,

 

 

수평방향으로 나열되는 것이 아니라, 수직방향으로 10부터 1까지 나열되어 출력됩니다.

flex-direction: row로 고친 후, flex-wrap을 wrap-reverse로 바꿔 입력하면,

 

 

grid, 그리드 방식으로, 숫자가 반대로 나열되는 것을 확인할 수 있습니다.

그럼 이번에는 no-wrap-reverse라고 입력하면, 처음과 같은 형태와 같다는 것을 알 수 있습니다.

 

 

 

이번시간에 배운 내용들을 다시 한 번 정리하면,
부모박스에 flex를 선언함으로써, 부모 밑에 종속된 child박스와 박스에 있는 element도 움직일 수 있습니다.
즉, flex를 이용하면, child박스에게 일일이 명령할 필요가 없을 뿐더러,
박스 안의 element, contents도 함께 움직이게 할 수 있습니다.