flex 3 FireFox에서 flex-wrap과 overflow의 호환성 부족 해결 사례 #aside .inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; overflow-y: auto; /* 문제의 원인 */ "#aside .inner"는 flex 컨테이너이며, 2개의 박스 a와 b를 담고 있습니다. 컨테이너는 상하(y축) 스크롤됩니다. "flex-wrap: wrap" 설정을 집어넣어 컨테이너의 폭이 여유가 있을 경우 가로로 2개의 박스를 배열하고, 폭이 좁을 경우 세로로 박스를 배열합니다. MS Edge와 Google Chrome은 가로, 세로 배치가 정상으로 전환되지만, Mozilla FireFox는 세로로만 배열됩니다. Microsoft Ed.. 2022. 9. 19. 북클럽 스킨 "관련글(related-articles)" flex box로 변경 등록한 글의 하단에 배치되어 현재 글과 관련 있는 글들을 보여 주는 메뉴입니다. PC 화면에서는 가로로 4개, 모바일 화면에서는 가로 2개씩 2줄로 역시 4개의 글 링크가 있습니다. 그대로 사용해도 괜찮은 기능입니다. 단지 자신이 원하는 형태로 수정하려면 거의 불가능할 정도로 코드가 복잡합니다. CPU 연산을 필요로 하는 CSS 코드로 짜여 있습니다. width: 101.621621621621622%; margin-left: -1.621621621621622%; padding-left: 1.621621621621622%; padding-bottom: 68.181818181818182%; width: 103.571428571428571%; margin-left: -3.571428571428571%; pad.. 2022. 6. 12. Flex 컨테이너의 수평 위치 중앙에 배치 flex 컨테이너 스크롤-바를 수평 위치 중앙에 배치하기 위하여 justify-content와 overflow를 동시에 설정할 때 발생하는 호환성 문제를 해결하는 방법입니다. 현재 사용 코드 #header { position: relative; max-width: 1366px; margin: 0 auto; } #gnb { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } ...... #gnb ul { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: nowrap; .. 2022. 1. 11.
