flex Box : IE 10+, 안드로이드 4.4+ 부터 정식 지원합니다.
주의 : 안드로이드 4.4 이상일지라도 삼성브라우저 버전이 낮으면 Flex Box가 지원 안될 수도 있습니다.
해당 페이지 개발시 참고 자료 (Flex Box 크로스브라우징)
링크
아래 빨강색 테두리"만" 입력하십시오
다른 Flex 관련 속성들은 default 값이어야 합니다.
Flex Item layout 속성은 빈칸이어야 합니다.
예외 : Flex Item 속성인 order 속성은 입력 가능합니다.
(단, 최소 "Flex Item 총개수 - 1개"만큼의 Flex Item에게 각각 order 속성을 주어야합니다.)
위 레이아웃은 미디어쿼리와 :after 가상 선택자를 활용한 기법입니다.
IE 크로스브라우징을 위해 min-width 속성값을 넣어줘야합니다. (파이어폭스나 크롬은 min-width 속성이 없어도 원하는대로 작동을 합니다.)
바로 min-width에서 오는 한계점입니다.
min-width 때문에 해당 페이지에 y-scroll이 있냐 없냐의 차이로 미디어쿼리 (분기지점 ~ 분기지점+17px) 구간에서 원하는대로 작동을 하지 않습니다.
따라서 위 레이아웃은 IE는 고려하지 않는 작업 또는 IE 까지 고려하되 스크롤이 브라우저 너비를 차지하지 않는 상황(플러그인으로 변동이 되었던지)에서 사용해야됩니다.
또는 해당 페이지는 무조건 y-scroll이 존재한다 또는 존재하지 않는다 라는 상황에서 사용해야됩니다.
y-scroll에 체크하시면 미디어쿼리 분기지점에 17px(스크롤너비)가 더해집니다.
flex 박스 width 값을 입력하세요
flex 박스 height 값을 입력하세요
flex-wrap:wrap 또는 wrap-reverse로 설정해주세요
원하시는 margin, padding값을 입력하세요
'1'을 입력해주세요.
'1'을 입력해주세요.
'0px'을 입력해주세요.
flex-basis - (단위 반드시 입력, 0이어도 0px로..IE10 고려)