[반응형 웹 디자인]플렉서블 박스 기술 익히기

플렉서블 박스로 작동시키기 위한 기본 설정

속성명	속성값	적용요소
display	flex, inline-flex	모든요소

[ display:-webkit-flex; ]를 사용하는 이유는? 브라우저 접두사를 붙여줘야 안정적으로 사용 가능하다. 신 기술일 경우 대부분 이런 방법을 사용한다.

속성이라면 속성앞에 접두사를 붙여준다.

플렉스 아이템의 배치 방향 설정하기

속성명

속성값

적용 요소

flex-direction

row(기본값),

row-reverse,

column,

column-reverse

플랙서블박스

속성값명	속성값 설명
row	박스를 왼쪽에서 오른쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고, 교차축은 세로가 됩니다.
row-reverse	박스를 가로로 배치하되 역방향으로 배치합니다. 즉, 오른쪽에서 왼쪽으로 배치 합니다. 해당 속성값으로 설정 시 주축은 가로가 되고, 교차축은 세로가 됩니다.
column	박스를 위에서 아래로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가로가 됩니다.
column-reverse	박스를 세로로 배치하되 역방향으로 배치합니다. 즉, 아래에서 위로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가로가 됩니다.

소스코드

실행화면

저작자표시 비영리 동일조건

세상에 가장 흐린 먹물도 가장 좋은 기억력보다 낫다.