Flexbox 기초 / 1단계 : flex-direction 쉽게 알아보자

UI 구현을 할때 가장 머리가 아팠던 걸 골라보라면

역시 배치임

 

pacing 과 margin. float을 이용하여 요소 하나하나를 배치해주었음..(핵 노가다 ㅠㅅㅠ)

Flexbox 를 알기전까지!

 

Flexbox를 이용하여 통일감을 주고 불필요한 일을 하지 않게 효율적으로 배치해줌.

그만큼 기본적이지만 중요한 만큼 다시한번 repeat 하는 느낌으로 글을 작성해보게씀.

(신입 되고싶은 코린이라서 부족할수 있음)

 

 

 

 

우선 컨테이너의 display에 flex를 설정해준다.

 

.container{
	display:flex;
}

 

이러면 flexbox 설정 완료 !

참 쉬움

 

flex를 설정하고 container의 꾸며줄수 있는 속성들을 이용함.

 

 

---

flex-direction

---

해석하면 flex의 방향

 

말 그대로 요소들을 어떤 방향으로 보여지게 할것인가, 주축을 어디로 볼 것인가.

 

 

flex-direction 속성에는

row, row-reverse, column, column-reverse 이렇게 4가지가 있음.

 

 

먼저 속성값을 row로 설정하면

.container{
	display: flex;
	flex-direction : row; //왼쪽에서 오른쪽으로
}

 

 

 

이렇게 왼쪽에서 오른쪽순서로 가게됨.

흔히 우리가 배치할때도 이 값이 default 임.

 

 

---

 

그다음은 row-reverse로 설정

.container{
	display: flex;
	flex-direction : row-reverse; //오른쪽에서 왼쪽으로
}

 

row-reverse가 된 것을 볼 수 있음.

주의할 점이 item의 순서도 완전히 reverse가 된 것으로 볼 수 있음.

 

---

그다음은 column로 설정

 

.container{
	display: flex;
	flex-direction : column; //위쪽에서 아래쪽으로
}

 

column이라는 뜻이 기둥이라는 뜻임

사진 처럼 기둥이 세워졌다고 생각하면 외우기 편함.

(column 하니까 콜로세움이 떠오르던데 연관관계가 있는 것 같음)

---

마지막은 column-reverse로 설정

.container{
	display: flex;
	flex-direction : column-reverse; //아래쪽에서 왼쪽으로
}

 

요소들의 순서가 column-reverse 된것으로 볼 수 있음.

 

 

+

추가적으로 container의 전체 높이를 정해준다면 item들은 제일 밑으로 가서 reverse가 됨.

.container{
	display: flex;
	flex-direction : column-reverse; //아래쪽에서 왼쪽으로
	height: 50vh;
	border: 1px solid black; //높이가 보이게
}

 

이렇게 flex-direction의 4가지 요소를 적어보았음.

 

 

 

 

이렇게 하다보니 궁금증들이 생길거임.

 

row-reverse가 되지 않은채로 그대로 오른쪽 끝에 배치 되거나

center에 배치되거나

column이 오른쪽 밑에 배치를 한다거나 이런 생각이 들지 않음?

 

혹은 저 items들의 간격을 주고싶다던가.

 

위 내용들은 justify-content나 align-items 를 이용해서 디테일한 배치를 할 수 있음.

위 내용들은 다음 시간에 올리겠음!!!