반응형 웹 css 플렉서블 박스

플렉서블 박스

가변적인 박스를 만드는 기술인 동시에 웹사이트의 구조 설계를 위한 새로운 기술

반응형 웹 제작 시 필수 기술인 가변 그리드 기술을 이용해서 만다는 가변적인 박스를 간단하게 말어 준다.

1. 개념

플렉서블 박스 = 부모 박스

플렉서블 박스에서 부모 박스는 가변적인 박스로 작동하기 위한 기본 개념이다.

모든 요소를 감싸고 있는 존재 

부모 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 동작한다.

2. 개념

부모박스를 플렉서블 박스로 사용 하였다면

그안의 자식들은 "플렉스 아이템"이라는 이름을 달고 작동하게 된다.

3. 플렉서블 박스의 축

주축을 가로로 설정하면 플렉스 아이템들이 왼쪽에서 오른쪽으로 배치

주측을 세로로 설정하면 플렉스 아이템들이 위에서 아래로 배치

지원 가능 브라우저

익스플로러  : 11.0~

크롬 : 29.0~

사파리 : 7.0 -webkit- 접두사 필요

파이어폭스 :28.0~

오페라 : 20.0~

안드로이드 4.4~

IOS 사파리 : 7.0 -webkit- 접두사 필요

익스플로러 모바일 : 지원안함

오페라 미니 : 지원안함

블랙베리 : 10.0 -webkit- 접두사 필요

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

display  : flex, inline-flex (모든요소 적용 가능)

flex : 박스를 블록 수준의 플렉서블 박스로 작동

inline-flex : 박스를 인라인 수준의 플렉서블 박스로 작동

이처럼 브라우저 접두사를 사용하자

블렉 서블 박스 기술은 아직 W3C의 기술 명세 확정 단계가 아니므로 반드시 브라우저 접두사를 붙여야 한다.

유의사항

접두사를 붙인 속성 또는 속성값은 맨 앞쪽에 작성해야 한다.

확정 단계가 아닌 기술을 안정적으로 지원하기 위해서 이다.

접두사를 붙이지 않은 속성 또는 값은 맨 뒤쪽에 작성한다.

플렉스 아이템 배치 설정

flex-direction

row : (기본값) : 박스를 왼쪽에서 오른쪽으로 배치 

row-reverse : 박스를 가로 배치로 하되 역방향으로 배치 (오른쪽 - > 왼쪽)

column : 박스를 위에서 아래로 배치

column-reverse : 박스를 아래에서 위로 배치

여러줄로 배치

기본 배치는 한 줄로만 배치가 된다.

만약 박스를 여러줄로 배치하고 싶다면 속성을 설정해야 한다.

flex-wrap

nowrap : 박스를 한 줄로 배치한다. 기본값

wrap : 박스를 여러줄로 배치

wrap-reverse : 박스를 여러 줄로 배치하되 역방향으로 배치한다.

배치방향과 여러 줄 배치 한번에 설정하기

flex-flow

[flex-direction] [flex-wrap]

주축을 기준으로 아이템 배치

justify-content

flex-start : 박스를 주측의 시작점으로 배치하며 기본값이다.

flex-end : 박스를 주측의 끝점으로 배치

center : 박스를 중앙으로 배치

space-between : 플렉서블 박스에 빈 공간이 있을 때 사용 , 첫번재와 마지막 박스는 양쪽 끝으로 붙이고 , 나머지는 동일한 간격으로 정렬

space-around : 양쪽끝에 있는 박스의 양 옆에도 공간을 둔채 자동 정렬

교차축을 기준으로 아이템 배치

align-items

stretch : 박스를 확정해서 배치하며 기본값이다.

flex-start : 박스를 교차축의 시작점에 배치

flex-end : 박스를 교차축의 끝점에서 배치

center : 박스를 교차축의 중앙에 배치

교차축 방향으로 아이템을 다양하게 배치

align-content

justify-content 속성과 동일하다.

배치 순서를 변경하기

order 

플렉서블 박스의 속성을 적용하면 배치 순서를 자유롭게 변경가능하다

플렉스 아이템의 크기 늘이고 줄이기

flex[flex-grow][flex-shrink][flex-basis]

flex : 0 1 auto (기본값)

flex : 0 auto (0 1 auto와 같음)

flex : inital(0 1 auto와 같음)

flex : auto(1 1 auto와 같음)

flex : none(0 1 auto와 같음)

flex-grow : 플렉서블 박스에 여백이 존재 할 경우 아이템의 크기를 늘일 수 있는 속성 , 음수 사용불가

단 flex-basis속성값에 따라 늘어나는 크기가 변할 수 있다.

1 1 2 : 남는 공간을 4등분 하여 각각 1/4, 1/4, 2/4 크기만큼을 기본 크기에 더한다.

flex-shrink : 플렉서블 박스 안의 아이템 크기가 넘칠 경우 크기를 줄일 수 있는 속성

단 flex-basis속성값에 따라 줄어드는 크기가 변할 수 있다.

1 1 2 : 남는 공간을 4등분 하여 각각 1/4, 1/4, 2/4 크기만큼을 기본 크기에서 뺀다.

flex-basis : 아이템의 기본크기를 설정하기 위한 속성

속성값을 0 으로 설정할 경우 flex-grow,shjrink 속성값에서 설정한 비율이 그대로 적용한다.

속성값을 auto로 설정할 경우 기본적으로 가지고 있는 크기를 기준으로 flex-grow,shrink 속성값에서 설정한 비율이 적용한다.