[CSS] FlexBox

오늘은 FlexBox에 대해서 공부해봤다.

Flexbox는 박스안에 아이템들을 정렬하고 사이즈를 한꺼번에 조절해주기 아주 좋은 기능을 가지고있다.

Flexbox는 박스에 적용되는 속성값들이 존재한다. 그리고 각각의 아이템들에 적용할 수 있는 속성값들이 존재한다.

그리고 Flexbox에는 중심축과 수평축이 있다.

실습을 통해서 한번 알아보자.

JS Bin 주소

<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>

먼저 html의 body안에 div class를 container로 설정해준다.

.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
}

그 다음에 padding-top을 통해서 위쪽의 여백을 100px만큼 설정해주고 배경색을 beige컬러로 설정해주었다.

그리고 display를 flex로 작성해서 containter를 flexbox로 설정해주었다.

.item1 {
  background: #ef9a9a;
  flex-grow: 1;
}
.item2 {
  background: #ce93d8;
}
.item3 {
  background: #90caf9;
}

그 후에 item1에 flex-grow를 추가하여 1이라는 값을 넣어줬더니 아이템들이 변하는 것을 볼 수 있었다.

위와 같이 1번 아이템만 창을 늘릴때마다 똑같이 늘어났다.

.item1 {
  background: #ef9a9a;
  flex-grow : 2;
}
.item2 {
  background: #ce93d8;
  flex-grow : 1;
}
.item3 {
  background: #90caf9;
  flex-grow : 1;
}

그렇다면 아이템 1,2,3에 각각 flex-grow값을 2,1,1을 넣어주면

위와 같이 2:1:1 비율로 화면이 늘어날때마다 아이템의 길이도 똑같이 늘어나는 것을 볼 수 있다.

하지만 flex-grow를 사용했을때는 늘어나는 비율만 바뀌고 줄어들때는 똑같이 1:1:1 비율로 똑같이 줄어드는 것을 볼 수 있었다. 그렇다면 줄어드는 비율도 바꿀수는 없을까?

물론 있다. flex-shrink를 사용하면 줄어드는 비율도 설정할 수가 있다.

.item1 {
  background: #ef9a9a;
  flex-grow : 2;
  flex-shrink : 1;
}
.item2 {
  background: #ce93d8;
  flex-grow : 1;
  flex-shrink : 1;
}
.item3 {
  background: #90caf9;
  flex-grow : 1;
  flex-shrink : 2;
}

이번에는 flex-shrink를 사용하여 각각 1,1,2의 값을 넣었다. shrink는 숫자가 클수록 그 숫자의 배수만큼 줄어들기 때문에 item3은 2배로 줄어들게 된다.

flex-shrink를 사용하여 줄어드는 것을 확인해보았다. 아이템 1과 2에 비해서 3이 2배로 줄어든 것을 볼 수 있다.

그 다음 주목해야할 것이 있다. 바로 flex-basis이다. flex-basis는 공간을 얼마나 차지해야하는지 세부적으로 명시해야 할지 도와준다.

기본적으로 flex-basis를 작성하지 않았을때는 auto로 값이 설정되어 위와 같이 flex-grow나 flex-shrink에 따라 값이 변하게 된다. 하지만 flex-basis를 아이템에다가 %를 붙여서 비율을 적어주면 늘어날때나 줄어들때나 그 비율로 크기가 변하는 것을 확인할 수 있다.

.item1 {
  background: #ef9a9a;
  flex-basis : 70%
}
.item2 {
  background: #ce93d8;
  flex-basis : 20%
}
.item3 {
  background: #90caf9;
  flex-basis : 10%
}

각각의 item에 이번에는 flex-basis를 사용하여 비율을 70 20 10으로 정해주었다. 그렇다면 결과는 어떻게 변했을까?

위 사진이 화면이 늘어났을 때 아래 사진이 줄어들었을 때이다. 화면이 늘어났을 때와 줄어들었을 때 모두 flex-basis에서 설정한 7:2:1 비율로 변하는 것을 볼 수 있다.

그렇다면 이번엔 flex-box를 정렬하는 법에 대해서 알아볼 것이다.

다시 위와같이 나오도록 아이템 값을 바꾸고 아이템들의 방향을 바꾸기 위해 .container에 flex-direction이라는 속성을 사용할 것이다.

.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : row;
}

보통 flex-direction을 명시하지 않아도 기본으로 row값으로 되어있어 왼쪽에서 오른쪽으로 정렬하는 것을 볼 수 있다. 그렇다면 이번엔 flex-direction에 column을 넣어보겠다.

flex-direction을 column으로 바꾸었더니 위에서 아래로 정렬되는 것을 볼 수 있다.

이로써 가로로 정렬하려면 row를 세로로 정렬하려면 column을 적용하면 된다.

이제 아이템의 방향을 바꾸는 것을 알아보았으니 정렬하는 속성들을 알아보자.

정렬에 쓰이는 두가지 속성은 아래와 같이 두가지가 있다.

justify-content - 중심축을 기준으로 아이템들을 정렬

align-items - 수평축을 기준으로 아이템들을 정렬

중심축은 flex-direction으로 설정한 축이고 중심축의 반대축이 수평축이다.

justify-content와 align-items에는

flex-start, center, flex-end, space-between, space-around, space-evenly 중 한가지로 설정할 수 있는데

직접 해보면서 차근차근 살펴보자.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : flex-start;
}

먼저 flex-direction이 auto일때 justify-content를 flex-start로 설정해주었다.

위와같이 왼쪽에 정렬되는 것을 볼 수 있다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : center;
}

그 다음 justify-content를 center로 했을 때이다.

가운데로 정렬되는 것을 볼 수 있다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : flex-end;
}

이번에는 justify-content를 flex-end로 했을 때다.

화면의 오른쪽 끝으로 정렬되는 것을 볼 수 있다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : space-around;
}

그다음 justify-content를 space-around로 설정해주었을 때이다.

시작점과 끝부분에서 약간의 공백과 함께 아이템마다 서로 일정공간이 생긴 것을 볼 수 있다.

그래서 아이템끼리는 서로 일정공간이 생겼으니 처음과 끝부분의 공간보다 2배만큼의 공간이 생긴 것을 볼 수 있다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : space-between;
}

이번에는 space-between이다.

시작점과 끝부분에 첫번째 아이템과 마지막 아이템이 붙은 상태로 아이템마다 서로 공백이 생겼다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : space-evenly;
}

마지막으로 space-evenly이다.

space-evenly는 처음과 끝을 포함한 모든 간격을 똑같이 배치한다.

이상태에서 align-items를 사용하여 값을 입력하면 수평축을 기준으로 아이템이 정렬된다.

이로써 만들고자하는 웹사이트의 형식에 따라 이 flexbox를 여러 가지 속성을 이용해서 원하는대로 쉽게 배치할 수 있다.

그리고 또 오늘 flex-wrap에 대해 알아보았는데 flex-wrap은 아이템들이 열을 바꾸는 방법을 제어하는 속성으로 아이템을 감쌀것인지 감싸지 않을 것인지를 지정한다.

실습하면서 한번 봐보자.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : center;
  align-items : center;
  flex-wrap: nowrap;
}

먼저 justify-content와 align-items를 center로 바꾸고 flex-wrap을 nowrap으로 설정하였다.

nowrap으로 설정했을때는 화면이 줄어들었을 때 전과 똑같이 화면에 따라서 줄어들었다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : center;
  align-items : center;
  flex-wrap: wrap;
}

그렇다면 이번엔 flex-wrap을 wrap으로 바꾸어봤다.

아까와 다르게 화면이 줄어드니까 화면안에 여러 줄로 열바꿈을 하여 모두 끼워넣어지는 것을 볼 수 있다.

wrap과 nowrap 말고도 wrap-reverse라는 것도 있다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction : auto;
  justify-content : center;
  align-items : center;
  flex-wrap: wrap-reverse;
}

wrap-reverse를 하면 주축은 그대로 유지하면서 교차축을 기준으로 뒤집히게 배치된다. 아까와 다르게 화면이 줄어들었을때 교차축을 기준으로 뒤집혀서 아래부터 1로 배치되는 것을 볼 수 있다.

오늘 이렇게 flex-box에 대해서 알아보았는데 다른 기존의 기능들보다 훨씬 새롭고 흥미로웠다. 나중에 반응형 웹을 만들때 아주 유용하게 쓰일 것 같다는 생각이 들었고 화면 배치할때도 flexbox를 통해서 유용하게 배치할 수 있을 것 같았다. 오늘 이렇게 첫 포스팅을 작성해보았는데 앞으로도 꾸준히 공부한 것들을 작성하면서 발전해나가야겠다.