flexbox
flexbox layout
flexbox layout은 컨테이너를 기준으로 공간을 키우거나 줄여 맞춤 배치하도록 설정하는 방식의 디자인이다. 다음과 같이 영역에 설정한다.
display:flex
display 속성을 flex로 설정하면 내부 요소들의 배치 방식이 변경된다. 자기 자신은 block 속성을 가진다.
display:inline-flex
display 속성을 inline-flex로 설정하면 내부 요소들은 flex와 동일하게 배치되지만 자기 자신은 inline-block 형태로 배치된다.
flex-direction
flex-direction 속성은 flexbox의 배치 방향을 결정한다.
flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
flex-wrap
flex-wrap 속성은 flexbox의 폭이 100%를 넘을 경우 줄 바꿈 여부를 결정한다.
flex-wrap : wrap;- 폭이 100%를 넘어가면 줄을 바꾸어 배치flex-wrap : nowrap;- 폭이 100%를 넘어가도 줄을 바꾸지 않고 비율로 설정하여 (기본값)
flex-flow
flex-flow 속성으로 flex-direction과 flex-wrap 속성을 같이 설정할 수 있다.
flex-grow
flex-grow 속성은 flexbox의 내부 항목에 설정하여 비어있는 영역에 대한 점유 비율을 설정한다.
flex-shrink
flex-shrink 속성은 flexbox의 내부 항목에 설정하여 폭이 초과한 경우에 대한 수축 비율을 설정한다.
예제의 inner 블록은 50%의 폭을 가지고 있어 합계 150%가 되므로 한 줄에 표시할 수 없는 상황이다. flex-wrap 속성도 nowrap 으로 되어 있어 줄 바꿈도 이루어지지 않기 때문에 영역이 부족한 상황이며, 이 때 폭이 같음에도 설정된 flex-shrink 비율에 따라 수축하는 것을 알 수 있다. 값이 클 수록 더 많이 수축한다.
flex-basis
flex-basis 속성은 flexbox 내부 항목의 초기 크기를 지정하는 데 사용한다.
지원 브라우저 확인
Last updated
