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