Flexbox?
일반적으로 웹페이지의 레이아웃은 css의 display, position 등과 같은 속성을 사용해 구현한다.
❗ 그러나!! 이러한 속성을 사용할 경우 레이아웃을 표현하는 것은 굉장히 복잡하다.
이러한 복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것이 flexbox다. flex 혹은 flexible box 라고도 부른다.
flexbox를 사용할 경우 요소의 크기와 순서를 유연하게 배치할 수 있다.
그럼 flexbox 에는 어떠한 속성들이 있고 이들을 어떻게 활용하는지 알아보자.
📣 필수 속성
아래 속성들은 부모 요소에 적용해야 한다.
1. display: flex;
flexbox를 사용하려면 display 속성값을 flex 로 지정해야 한다.
2. flex-direction : 방향
내부 요소들의 정렬 방향을 나타내는 속성이다.
방향으로는 row, column, row-reverse, column-reverse 네 가지 방향이 있다.
➡️ flex-direction: row
flex-direction의 기본값이다.
텍스트의 방향대로 요소들을 정렬한다. (가로 방향)
💡 보통 텍스트의 방향은 좌 -> 우 방향이지만, 특이하게도 아랍어의 경우, 반대방향으로 글을 쓰기 때문에, 아랍어를 사용할 경우에는 오른쪽에서 왼쪽 방향으로 정렬된다.
⬇️ flex-direction: column
위에서 아래로 요소들을 정렬한다. (세로 방향)
⬅️ flex-direction: row-reverse
row 방향의 반대에서부터 요소들을 정렬한다. (가로 방향)
⬆️ flex-direction: column-reverse
column 방향의 반대에서부터 요소들을 정렬한다. (세로 방향)
➕ 부가 속성 (부모 요소👨🦰)
1. flex-wrap
자식 요소의 수가 많아 꽉 찼을 때, 부모요소에 flex-wrap: wrap; 을 적용하면 자동으로 줄바꿈을 해준다.
flex-wrap : nowrap
flex-wrap의 기본값이다.
flex-wrap: wrap
공간이 부족하면 자동으로 줄바꿈이 된다.
요소들 사이의 간격을 지정하고 싶다면 gap 속성을 활용하면 된다.
gap: 10px : 모든 방향의 간격을 10px로 지정
gap: 20px 10px : 세로, 가로 순서대로 간격을 20px, 10px로 지정
2. justify-content : 기본 축 정렬
앞서 필수 속성에서 지정한 flex-direction의 방향이 기본 축이다.
justify-content : flex-start
justify-content의 기본값이다.
flex 방향 시작점 기준으로 정렬한다.
justify-content : flex-end
flex 방향 끝점 기준으로 정렬한다.
justify-content : center
중앙에 정렬한다.
justify-content : space-between
flex 방향 양 끝점 기준으로 양 끝에 붙혀서 정렬한다.
justify-content : space-around
flex 방향 중앙점과 양 끝 기준으로 양 끝과도 간격을 둬서 정렬한다.
3. align-items : 교차 축 정렬
기본 축의 수직 방향이 교차 축이다.
align-items: stretch
수직 방향에 최대한 늘려서 정렬한다.
align-items: flex-start
수직 방향에 위쪽으로 정렬한다.
align-items: flex-end
수직 방향에 아래쪽으로 정렬한다.
align-items: center
수직 방향 가운데에 정렬한다.
➕ 부가 속성 (자식 요소👧)
1. flex-grow : 요소 늘려서 채우기
기본 값은 0이며, flex-grow 값이 클수록 많이 늘어난다.
box1 : flex-grow: 2;
box2 : flex-grow: 1;
box3 : flex-grow: 0;
2. flex-shrink : 요소 줄여서 채우기
만약 요소들의 크기가 커서 넘치는 경우, 요소의 크기를 줄여서 플렉스박스 안에 가득 채운다.
flex-shrink의 기본 값은 1이므로, 기본적으로 요소를 줄여서 배치하고, 0으로 지정하면 크기가 줄어들지 않는다.
flex-shrink 값이 클수록 상대적으로 많이 줄어든다.
box1 : flex-shrink: 3
box2 : flex-shrink: 2
box3 : flex-shrink: 1
box4 : flex-shrink: 0
🍎 마무리
나도 flex에서 많이 해매다가 flex 연습하기 좋은 사이트를 찾았다.
쉽고 간단하고 재밌다. 다 푸는데 20분? 도 안걸리니까 나처럼 어려운 사람들은 한번씩 해봐도 좋을 것 같다.
