[CSS3] flex Box - justify-content, align-items

안녕하세요 이번 flex에서는

container 속성에서 기존에 있던 direction 속성을 알아야 사용할수가 있는

속성인 justify-content 와 align-items 속성에 대해서 포스팅을 하려고합니다.

알아야 하는 이유는 

justify -content ( 가로축 - 중심축 )

align-items ( 세로축 - 교차축 )

이기 때문에 flex-direction : row,  row-reverse, column , column-reverse 의 속성을 알아야 현재 컨테이너에 어떤 

정렬을 넣어야 하는지 알수 있기 때문입니다. 

justify-content  

 

> 가로 축을 기준으로 좌우에 대한 정렬을 관장 합니다.

속성 나열은 아래와 같습니다.

flex-start (default)                 >>  요소들을 컨테이너의 왼쪽으로 정렬

flex-end >>   요소들을 컨테이너의 우측으로 정렬

center >> 요소들을 컨테이너의 중앙으로 정렬

space-between                 >> 요소들 사이에 동일한 간격을 둡니다.

space-around          >> 요소들 주위에 동일한 간격을 둡니다.

space-evenly(FireFox Only)         >> 첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과

마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

설명은 이와같고 가로 축 정렬이기 때문에

flex-flow 는 row nowrap 으로 진행하겠습니다.

start

end

center 는 아래의 사진과 같이 요소들의 시작 시점입니다.

 (처음에 할때 거꾸로 출력되는거 아닌가? 하고 헷갈렸습니다.. ㅜ)

거꾸로는 row-reverse를 써야하죠;;

이 3개의 속성은 그냥 해보면 바로 직관적으로 알수 있습니다.

space-between 과 space-around를 보죠

between 은 사이의 간격이 일정합니다.  (양쪽 끝을 붙일 상태에서 사이사이에 일정한 간격을 두기 위해선 좋네요)

around는 외부의 간격이 일정합니다. (맨 처음과 맨 끝은 좌우가 일정하진 않지만 끝과 끝은 일정하죠 )

space-evenly(FireFox Only) 의 경우는 around의 추가된점? 으로 around는 양쪽 끝으로 인해 외부 간격이 전부 일정하다고는 보기 힘들지만  space-evenly 를 이용하면 전부 똑같은 간격을 가질수 있습니다.

align-items

세로 축을 기준으로 정렬을 하게 됩니다.

flex-start          컨테이너의 최상단으로 정렬 합니다.

flex-end          컨테이너의 최하단으로 정렬합니다.

center                         컨테이너의 세로 축의 중앙으로 정렬 합니다.

baseline                      컨테이너의 시작위치에 정렬 합니다.

stretch(default)             컨테이너의 맞게  늘립니다.

직관적입니다. 위 아래 중앙 나머지 baseline과 stretch 에대해서 좀더 자세히 보기전에

직관적인 start end center 부터 보면

보시는 것처럼 매우 직관적이고 justify-content 와같이 좌 < - > 우 가 아닌 세로 축이기 때문에

위 

↑

↓

아래 기준으로 잡고 정렬 을 하게 됩니다.

baseline 과 stretch(Default)  을 보겠습니다.

???? flex-start 와 차이점이 없어 보입니다. 

baseline                      컨테이너의 시작위치에 정렬 합니다.

stretch(default)            컨테이너의 맞게  늘립니다.

라고 되어있는데 baseline과 stretch 의 확인을 해보겠습니다.

span 태그를 제가 보기 편하게 하기 위해서 

크기를 정확히 지정해 놓았기 때문에 발생한것으로 해당 에서만 제거하고 확인해보면

span 의 height 와 width 를 auto 로 준후 확인시

stretch 는 확인이 되었습니다. (자동으로 찰때 꽉찹니다.) 세로축 기준이기 때문에 세로로 꽉채워집니다.

(이 때문에 input  같은 버튼 생성시 width : auto 로주면 꽉차게 됩니다. flex-start로 줘야 합니다.)

자 이번엔 baseline을 확인해보겠습니다.

font-size를 바꾸고 비교해보았습니다. 위는 baseline이고 아래는 flex-start입니다.

그림판을 통해 직선으로 선을 그렸을때 baseline은 아래의 라인이 맞고 

아래의 flex-start는 조금 떠있는 모습이 보여집니다.

이로써 가로와 세로 축 정렬 방법에 대해 봤고

row와 column 을 통해서 방향을 가로로 할지 세로로 할지도 봤기 때문에 기본적인 Flex Box Model 에정렬은 한것 같습니다.

여기까지 해본 후에 는 FlexBox 개구리 테스트를 해보면 좋을거 같아서 링크를 남깁니다.

10번 깼습니다

// flexBox Froggy  게임  플렉스 박스 게임 

https://flexboxfroggy.com/#ko

[마지막 번 문제 24번]

해당 번호전까지는 아마 술술 풀릴거라 생각 됩니다.

24번도 뭐 금방 풀겠지만 잠깐 

보자면 이렇습니다. 이 개구리들을 여러가지 속성을 합쳐서 원래의 위치에 가져다 놔야 합니다.

일단 화면만 놓고 봤을땐 2- 5 로 되어있는데 7개의 개구리가 일자로 되어있기 때문에 줄바꿈이 필요해보입니다.

그리고 세로 방향으로 보이니 flex-wrap : wrap 과 flex-direction:column 이 필요할거같아서 두개를 합치면

음 좌우가 반대인거같아서 reverse를 줘야 할거같은데 column-reverse를 주게 되면 노랑개구리가 내려오고 빨간개구리도 내려올뿐 좌우가 변하진 않습니다. 

기존의 포스팅 했던 줄넘기기에 보면

// 줄넘기기 

http://ipex.tistory.com/entry/CSS3-flex-Box-flexwrap-%EC%A4%84-%EB%84%98%EA%B8%B0%EA%B8%B0-flexflow-%EB%B0%A9%ED%96%A5-%EC%A4%84-%EB%84%98%EA%B8%B0%EA%B8%B0?category=768582

wrap-reverse가 더 맞아 보입니다.

그런데 답칸이 4줄밖에 없기 때문에 flex-flow를 통하여 합쳐 주는것이 좋아보입니다.

flex-flow:column wrap-reverse;

그뒤로는 해보면 되겠죠?  : 정답 (드래그하세용) 

flex-flow:column-reverse wrap-reverse;

align-items:flex-end;

justify-content:center;

align-content:space-between;