9강 Flexible Box
Flexiblebox
:수평 레이아웃을 만드는 강력한 기능 flex box!
- 요소들은 기본적으로 블록 개념이 많아서 자동으로 수직으로 쌓
이기 때문에 수직 레이아웃에 대해서는 큰 불편을 느끼지 않습
니다.
- 그러나 요소를 가로로 배치하는 수평 레이아웃의 경우 CSS를 사
용하는 개발자들에게 큰 고통을 선사합니다.
* float는 clearfix문제 때문에
* inline-block은 의도치 않은 공백발생 문제 때문에 불편
Flex box의 핵심 개념2가지
Container : 정렬대상인 Item들을 감싸는 요소
Items : 실제로 정렬될 대상
Flex Container :
display : flex container를 정의
flex-direction flex items의 주 축을 설정
flex-wrap flex items의 줄 바꿈을 설정
flex-flow flex-direction과 flex-wrap의 단축 속성
justify-content 주 축의 정렬 방법을 설정
align-content 교차 축의 정렬 방법을 설정 (2줄 이상)
align-items 교차 축에서 items의 정렬 방법을 설정 (1줄)
display
: Flex Container를 정의
flex block특성의 container를 정의
inline-flex inline특성의 container를 정의
display : flex와 inline-flex의 차이
flex-direction
Items의 주 축(main-axis)의 방향을 설정.
row : Items를 수평축(왼쪽에서 오른쪽으로)표시 (기본값)
row-reverse : Items를 row의 반대 축으로 표시
column : Items를 수직축(위에서 아래로) 표시
column-reverse : Items를 column의 반대 축으로 표시
flex-wrap
Items의 줄 바꿈을 설정
nowrap 모든 Items를 한 줄에 표시 (기본값)
wrap Items를 여러 줄로 묶음
wrap-reverse Items를 wrap의 역 방향으로 여러 줄로 묶음
flex-flow
flex-direction과 flex-wrap의 단축 속성.
flex-flow : row-reverse nowrap;
justify-content
주 축(main-axis)의 정렬 방법을 설정.
flex-start : Items를 시작점부터 정렬 (기본값)
flex-end : Items를 끝점부터 정렬
center : Items를 가운데 정렬
space-between : 시작 Item은 시작점에, 마지막 Item은
끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
space-around : Items를 균등한 여백을 포함하여 정렬
space-evenly : Items을 균등한 여백을 포함하여 정렬.
align-content
- 교차 축(cross-axis)의 정렬 방법을 설정.
- 주의할 점은 flex-wrap 속성을 통해Items가 여러 줄(2줄 이상)이고 여백이 있을 경우에만 사용할 수 있음.
stretch : container의 교차 축을 채우기 위해Items를 늘림 (기본값)
flex-start : Items를 시작점부터 정렬
flex-end : Items를 끝점부터 정렬
center : Items를 가운데 정렬
space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
space-around : Items를 균등한 여백을 포함하여 정렬
align-items
- 교차 축(cross-axis)의 정렬 방법을 설정.
- Items가 한 줄일 경우 많이 사용하며, container에 align-content속성이 없거나 기본값(stretch)이어야 합니다.
stretch : container의 교차 축을 채우기 위해Items를 늘림 (기본값)
flex-start : Items를 시작점부터 정렬
flex-end : Items를 끝점부터 정렬
center : Items를 가운데 정렬
baseline : Items를 문자 기준선에 정렬
style에서 float:left; 로 수평레이아웃을 하려고 할때 clearfix error가 발생한 것을 확인할수 있다.
clearfix error 가 발생했을 때 overflow:hidden; 이나 .clearfix::after 로 error 해제가 가능하다. (위 그림은 overflow로 error를 해제)
display:inline-block; 스타일을 적용하여 수평레이아웃 시킨 그림. html 마크업에서 발생하는 빈공간을 공백으로 인식하여 박스 사이에 공백 발생.
inline-block 을 사용하여 수평레이아웃을 할때 박스사이 공간을 없애기 위해서는 html 마크업시 수평레이아웃 대상의 빈공간을 모두 없애야 한다.
container에 display:flex;를 사용하여 item을 수평 레이아웃 시켰다. 공백과 clearfix error가 발생하지 않는 것을 확인 할 수 있다.
여러 박스를 만들어도 item의 부모태그인 container에 display:flex 를 사용하면 손쉽게 수평레이아웃을 설정 할 수 있다.
display:inline-flex;를 사용하여 container들의 수평 레이아웃을 설정한 그림.
inline-flex를 사용하지 않고 container 간의 수평레이아웃을 설정한 그림. (container 들을 묶어주는 부모태그 section에 display:flex; 를 사용.)
---------- display:flex; ↑ 설명 -------------------------------------------------------------------------------------------------
container 에 display:flex; 를 사용하여 A,B,C,D,E 총 5개의 item 박스를 수평정렬 시킨 그림.
5개의 item 박스는 브라우저창이 작아져도 다른줄로 넘어가지고 않는다. ( flex-wrap:nowrap; 이 기본 설정 이기 때문이다. )
flex-wrap : wrap; 으로 설정하면 브라우저창을 줄였을 때 끝에 있는 박스가 아래로 내려오는 것을 확인 할 수 있다.
flex-wrap : wrap-reverse;를 사용하면 브라우저창을 줄이면 박스가 아래로 내려갈때 첫번째 박스와 마지막 박스의 순서가 바뀐 것을 확인 할 수 있다.
-------------flex-wrap 설명 ↑--------------------------------------------------------------------------------------------------
flex-direction : row; 는 item을 수평축(좌에서 우로) 표시 한다. [기본 값]
flex-direction : column; 는 item을 수직축 (위에서 아래로) 표시 한다.
flex-direction : row-reverse; 는 item을 수평축(row의 반대축으로) 표시 한다.
flex-wrap : wrap; / flex-direction : row; 로 설정하여 웹브라우저를 실행시킨 그림.
flex-flow 는 단축 속성으로 [ flex-flow : wrap row-reverse 는 flex-wrap : wrap; flex-direction : row-reverse; 를 쓴 것과 같다. ]
------------------------flex-direction 설명 ↑-----------------------------------------------------------------------------------
display : flex; , flex-wrap : wrap; 으로 5개의 item 박스를 수평 레이아웃 시켜놨다.
justify-content : flex-start; 를 사용하여 item 박스를 시작점 기준으로 정렬 시켰다. 이때 flex-direction : row-reverse; 를 사용하여 시작점이 좌에서 우측으로 변경 되어서 모두 우측 정렬 된 것을 볼 수 있음.
justify-content : flex-end; 를 사용하여 item 박스를 종료지점 기준으로 정렬 시켰다. 이때 flex-direction : row-reverse; 를 사용하여 종료지점이 우에서 좌측으로 변경 되어서 모두 좌측 정렬 된 것을 볼 수 있음.
justify-content : center; 를 사용하여 수평레이아웃을 가운데 정렬 시켰다.
justify-content : space - between; 을 사용 하여 정렬하였다. [ item 박스의 양끝에 있는 박스를 좌우로 붙인 후 나머지 박스들은 동일한 간격으로 정렬 ]
- margin을 사용하여 동일한 공백을 주려고 하면 박스 width 와 공백 계산을 해야 하는데 justify-content 를 사용하면
그런 불편함이 없음. (위의 그림의 양옆 공백은 padding 값 20px 임.)
justify-content : space-around로 양 끝쪽에 각각 left 와 right 마진만 들어가 있다. 나머지 박스들은 동일한 간격으로 정렬 되었다.
ex ) a 박스의 left margin 2px , e 박스의 right margin 2px , a right margin 2px + b left margin 2px 총 4px 의 공간
justify-content : space-evenly; 를 사용하여 모두 동일한 간격으로 정렬 되었다.
--------------- justify-content 설명 ↑------------------------------------------------------------------------------------------
align-content : stretch 사용. 캡쳐된 사진에는 제대로 나타나지 않았다... 빈교차축을 채우기 위해 item을 늘림(기본값)
align-content : stretch 사용. 이 사진에는 잘 나왔다.ㅎ 빈교차축을 채우기 위해 item을 늘림(기본값)
align-content : flex-start; 사용. item 들을 시작점으로 정렬.
align-content : flex-end; 사용 item 들을 종료지점으로 정렬. (현재 주축은 x축 flex-direction : row; , 교차축은 y축이다.)
align-content : center; 사용. 현재 교차축인 y축을 기준으로 중앙 정렬 되었다.
align-content : space-between; 현재 교차축인 y축을 기준으로 위의 끝과 아래의 끝부분에 나뉘어 정렬됨.
align-content : center ; 로 y축 중앙정렬을 한 상태의 그림.
align-content : center ; 로 y축 중앙정렬을 한 상태에서 justify-content:center; x축 중앙정렬 해서 완전한 중앙에 정렬시킨 그림.
item:nth-child(even) 으로 b와d의 글자 크기를 20px으로 줄인 후 align-item : baseline; 을 사용 하였다. 문자 기준선에 정렬된 b와d를 볼수 있다.
align-items : flex-start ; 사용. 시작점 기준으로 정렬된 것을 볼 수 있다.
container 안에 있는 item에 display:flex 를 사용 한다면 어떻게 될까?
* item안에 박스가 없어도 텍스트를 박스로 인식하여 정렬 시킬 수 있다.
item안에 박스가 없고 글자만 있다면
.item {
display : flex;
justify-content : center ;
align-items: center ;
}
로 텍스트를 박스 정중앙에 정렬 시킬 수 있다.
