본문 바로가기

UX 개발/CSS - Flex

[CSS] IE 대응을 위해 flex-basis에 width & max-width 함께 넣기 (2022년 03월 16일 수정) IE 대응 관련 내용 추가 IE11(IE: Internet Explorer, 인터넷 익스플로러)은 여전히 국내 많은 조직에서 호환성을 맞춰야 하는 브라우저입니다. 다행히도 flexbox는 부분적이지만 IE11에서 사용이 가능합니다. 일부 기능들이 사용이 불가능하거나, 깨져서 표현되지만 일부 기능의 경우 다른 CSS 속성을 함께 기재함으로써 깨지는 현상을 해소할 수도 있습니다. 이 포스트에서는 flex-basis를 사용할 때 IE11에서도 정상적으로 표현이 가능한 방법에 대해 알아보고자 합니다. 1. flex-basis: 0는 width: 100%(채울 때) 또는 width: auto(랩핑할 때)를 함께 삽입 flex-grow를 활용하여 flex-basis를 0으로 할당함..
[CSS] flex-basis로 줄바꿈 방지 flex 레이아웃 만들기 [2022-03-08 내용추가] flex의 1개 값만 입력하는 단축 형태로 속성을 부여하는 경우 flex-basis가 자동으로 0으로 할당되기 때문에 별도 속성 추가정의 없이 줄바꿈 현상을 방지할 수 있습니다. /* One value, unitless number: flex-grow flex-basis is then equal to 0. */ flex: 2; 문제상황 row 방향의 flex 박스를 생성한 상황에서, wrap을 걸어 놓고 flex 요소의 크기가 고정되어 있을 때 다른 flex 요소의 콘텐츠 길이가 길어지면 줄바꿈이 자동으로 생성됩니다. wrap을 걸지 않으면 줄바꿈이 생기지 않겠지만 그런 경우면 고정시켜 놨던 flex 요소의 크기가 변합니다. 크기가 고정된 flex 요소의 크기를 유지하되 ..
[CSS] 채워지는 flex 요소 만들기 및 줄바꿈 주기 [코드예제] flexbox 콘테이너의 자식 요소들이 자동으로 콘테이너를 채우게 하는 레이아웃을 구성하고자 합니다. 또한 flex 요소을 여러개를 나열할 때 줄바꿈을 주어서 배치할 수 있는 방법도 함께 알아 보고자 합니다. 1. flex 콘테이너를 자동으로 채우는 flex 요소 만들기 : flex-grow flex를 지정했을 때 기본적인 박스모델 구조는 아래 이미지와 같이 flex 요소들의 너비가 auto로 할당되며, 왼쪽 정렬로 배치가 됩니다. 본 포스트에서는 flex 요소의 너비를 콘테이너의 남은 영역만큼 채워지도록 하는 레이아웃을 구성하고자 합니다. 그러기 위해서는 flex-grow 속성을 원하는 flex 요소에 할당할 필요가 있습니다. flex-grow는 flex 요소를 얼마나 큰 비율로 배치할까에..