레이아웃을 만드는 방법에는 총 3가지가 있는데 float를 제외한 flex,grid를 가장 많이 사용한다.
flex에는 부모요소인 flex-container, 자식요소인 flex-item이 있다.
1. flex-direction: row/column/column-reverse
flex를 사용하면 flex-direction이 기본값인 row로 설정된다. 요소를 수평정렬하고 싶을 때 flex를 사용하는 이유이다. 다음과 같이 요소를 수직으로 가운데 정렬하고 싶다면,다음과 같이 css를 주면 된다.
diplay:flex;
flex-direction:column;
align-item:center;
2.flex-wrap : nowrap/ wrap
flex-wrap속성은 기본값으로 nowrap이 설정되어 있다. 이는 요소들이 자리가 부족할 때 밑으로 넘어가지 않고,지정된 자리만큼 비율에 따라 줄어든다는 뜻이다.
wrap으로 설정하면, 요소들이 자리가 부족할 때 자동으로 밑으로 넘어가게 설정하는 것이다.
3. 주축(main-axis) / 교차축(cross-axis)
flex에서 주축과 교차축의 개념을 이해하면 기능을 활용할 때 도움이 되는 것 같다.
주축이란, flex container안에서 flex-item(box)를 배치하는 방향이다. flex-direction,justify-contents의 방향이 주축이다. flex-item을 오뎅이라고 생각했을 때, 주축은 그 오뎅을 끼우는 꼬치인 것이다.
교차축은 주축의 수직인 방향으로 align-items:center를 쓸때 기준이 되는 방향이다.
4. justify-contents(container속성)
justify-content는 주축을 기준으로 아이템을 정렬할 때 어떻게 떨어트릴건지에 대한 속성이다. 요소의 여백을 어떻게 줄 건지 정할 수 있다.
5. align-items(flex-item 속성)
align-self라는 속성도 있는데, flex-box에서 align-items에서 준 속성을 무시한 채 '그 item'만 다르게 정렬하고 싶을 때 쓰는 속성이다.
여기서 justify-contents와 align-items속성의 차이가 나온다.
justify-contents의 기준 : 주축을 기준으로 정렬
align-items의 기준 : 보조축을 기준으로 정렬
즉,두 속성을 요소를 원하는 방향으로 배치하고 싶다면 justify-contents를, 그 안에서도 같은 줄에 맞추어 정렬하고 싶다면 align-items속성을 같이 주어야 한다.
6. gap속성
flex에서 요소들의 간격을 넓혀줄때 gap이라는 속성을 사용할 수 있다.
gap은 부모요소인 container에 사용하는 속성이다.
nav > li{
display:flex;
gap:15px;}7. flex안에 flex
요소의 간격이 일정하게 떨어져 있다면 container에 flex만 줘도 충분하지만, 큰 요소들이 떨어져 있고 그 안에 작은 요소들이 다닥다닥 붙어있다면?
위와 같이 요소들을 배치하기 위해서는 일반 flex로 불가능하다. 우선 모든 요소들을 포함한 상위 컨테이너인 header에 집어넣고, 붙어있는 요소들을 각각 div로 묶어서 class를 준다. 왼쪽의 로고와 input태그가 있는 컨테이너를 left, 오른쪽의 요소들의 컨테이너를 right라고 하자.
단순히, header태그에 flex, justify-contents를 space-between으로 주면 다음과 같이 배치가 된다.
이는 header의 하위요소인 left,right가 flex를 주어 가로로 잘 위치되었으나, 그 안의 요소들은 flex의 영향을 받지 못해 그대로 수직정렬이 된것을 볼 수 있다. 이 때는 각 left,right 컨테이너에 flex를 주어야 한다.
.left{display:flex;}
.right{display:flex;}
이러면 다음과 같이 정렬된다. 오른쪽요소들은 크기가 같아 바르게 가로 정렬이 되었으나, 왼쪽요소들은 크기가 달라서 어긋나게 배치된것을 볼 수 있다. 물론 input태그에 padding-top을 주는 방법도 있겠으나, 가장 쉬운 것은 align-item : center를 주는 것이다.
.left{display:flex;
align-items:center};
이제 내가 원하던 모습되로 배치되었다!
- 참고로 flex에는 다른 기능들과 달리 right,left같은 방향을 포함한 명령어가 보이지 않는데,이는 flex가 개발요소의 전반적인 흐름에 의지하는 신개념 속성이기 때문이다.
예를 들어, 개발자가 구조를 역방향(왼쪽에서 오른쪽)으로 바꾸었다면, flex의 start가 오른쪽에서 왼쪽으로 자동으로 바뀐다.
