<CSS> Flexbox 레이아웃 (2) + Flexbox Froggy 풀이

2. 자식 요소 flex item

자식 요소인 flex item를 정렬할 수 있는 속성에는 여러가지가 있는데, 다음과 같다.

*유의점 : CSS 기존 속성 중 float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다.

 

1) order

flex container에 추가된 순서를 기준으로 각 flex item에 번호를 부여하여 순서를 바꿀 수 있다.

ex. order:정수값;

 

2) flex-grow

각 flex item들에 대해 설정한 값으로 너비를 준다. 화면이 늘어나면 같이 늘어난다.

*기본값은 0

ex. flex-grow:양의 정수값;

 

3) flex-shrink

각 flex item들에 대해 설정한 값으로 축소된다. 화면이 줄어들면 설정한 값만큼 축소된다(숫자가 클수록 크게 줄어든다).

*기본값은 0

ex. flex-shrink:양의 정수값;

 

4) flex-basis

각 flex item들에 대해 너비 값을 %, px 등으로 설정한다.

 

5) align-self

align-items 속성과 같은데, 개별 flex item을 정렬할 때 사용되며 우선순위가 높아 우선 적용된다.

*stretch : 기본값. flex container의 height 길이에 맞게 바뀌어 정렬(flex container의 height에 꽉차게)

*flex-start : flex container의 교차축이 시작되는 지점을 기준으로 정렬

*flex-end : flex container 교차축이 끝이 나는 지점을 기준으로 정렬

*center : 교차죽의 중앙에 정렬

*baseline : 폰트의 받침선(baseline)을 기준으로 정렬

 

 

<Flexbox Froggy>

Flexbox를 연습해볼 수 있는 사이트다. 고정된 값으로 제공되는 연못 수련의 잎에 Flexbox의 속성들을 이용하여 개구리를 알맞게 위치시켜야 하는 24개의 문제를 통해 연습할 수 있다.

 

마지막 문제풀이를 소개한다.

1) flex-flow를 통해 flex-direction과 flex-wrap 속성을 동시에 주도록 한다.

flex-direction 값으로는 column-reverse를 통해, 주축을 가로에서 세로로 바꾸고 개구리가 나열되는 기준을 위에서 아래가 아닌 아래에서 위로 바꿔준다.

 

flex-wrap 값으로는 wrap-reverse를 통해 개구리들을 한 줄이 아닌 여러 줄로 배치하되, 주축의 시작 위치를 왼쪽부터 오른쪽이 아닌 오른쪽부터 왼쪽으로 바꿔준다.

 

 

2) justify-content를 통해 메인축이 된 세로를 기준으로 center 값을 주고 개구리를 중앙으로 배치한다(긴 줄의 개구리들은 이미 한 줄의 영역을 꽉 채우고 있어 center 값을 주어도 변하지 않는다. 노란색 개구리만 움직인다!).

 

 

3) 여러 줄로 배치되어 있을 때 사용하는 align-content를 통해 교차축을 기준으로(여기에서는 가로줄) 양 쪽 끝으로 배치한다. 따라서 값을 space-between으로 준다.

 

 

정답 :

#pond {
	display: flex;
	flex-flow: column-reverse wrap-reverse;
	justify-content: center;
	align-content: space-between;
}

 

 

 

참고 : poiemaweb 웹사이트, Flexbox Froggy