transform 속성으로 요소를 이동, 회전, 크기 변경, 기울이기 등 2D/3D 변형을 수행하고,
transition과 animation 속성으로 CSS 속성 변화와 복잡한 애니메이션 효과를 구현합니다.
Flexbox는 1차원 레이아웃 시스템으로, 컨테이너와 요소 속성을 활용하여
유연하고 반응형인 레이아웃을 구현합니다.
CSS Grid는 2차원 레이아웃 시스템으로 행과 열을 동시에 제어하며,
multi-column 속성으로 신문과 같은 다단 레이아웃을 구현합니다.
플렉서블 레이아웃 자식 속성 및 데모- by. UXKM
Publishing
CSS
CSS 고급
플렉서블 레이아웃 자식 속성 및 데모
요약 설명
Flex(Flexbox)는 CSS3에서 도입된 레이아웃 방식으로, 요소의 크기가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 구현할 수 있습니다.
플렉스 컨테이너(부모 요소)와 플렉스 요소(자식 요소)로 구성되며, display: flex 또는 display: inline-flex로 설정한 요소가 플렉스 컨테이너가 됩니다.
복잡한 레이아웃도 적은 코드로 간단하게 표현할 수 있으며, 다양한 화면 크기와 기기에서 요소들이 자동으로 재정렬되어 반응형 웹을 구현하는 데 유용합니다.
과거에는 float이 주로 사용되었지만, 현재는 flex 또는 grid가 주로 사용됩니다.
자식 속성(Properties for the Parent - Flexbox Container)
flex container의 자식 요소입니다. float, clear, vertical-align 속성은 flex item에 영향을 주지 않습니다.
[Flexbox Items]
flex-grow
flex-grow 속성은 플렉스 컨테이너 내에서 할당 가능한 공간이 있을 때, 플렉스 요소가 얼마나 확장될지를 지정하는 확대 인자(flex grow factor)입니다.
기본값은 0이며, 양수 값만 사용할 수 있습니다.
모든 형제 요소가 동일한 flex-grow 값을 가지면 동일한 공간을 할당받고, 서로 다른 값을 지정하면 그 비율에 따라 공간을 나누어 할당받습니다.
일반적으로 flex-grow는 flex-shrink, flex-basis와 함께 flex 축약형 속성으로 사용합니다.
[flex-grow를 시각적으로 설명하는 다이어그램]
[모든
flex item이 동일한
flex-grow 속성값을 가지면 모든
flex item은 동일한 너비를 갖습니다.]
[두 번째
flex item의
flex-grow 속성값을 3으로 지정하면 다른
flex item보다 더 넓은 너비를 갖습니다.]
flex-grow 예제
flex-shrink
flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정합니다. flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 사용하며,
설정된 숫자 값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다.
기본값은 1, 적용 가능한 값은 양수입니다. 0을 지정하면 축소가 해제되어 원래의 너비를 유지합니다.
참고로 flex-basis 값이 설정되었다면 기존의 width 또는 height 속성 보다 우선 적용됩니다.
[기본은
flex container의 너비에 마춰 축소 /
특정 flex item만 해제(flex-shrink: 0;)하면 원래 너비 유지]
감소 너비(flex-shrink)는 요소의 너비에 영향을 받기 때문에 계산이 까다롭습니다.
영향을 받는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미합니다. flex container의 너비가 줄어 flex Items의 너비에 영향을 미칠 경우,
영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 flex Item의 너비가 줄어듭니다.
예를 들어 flex container의 너비가 줄어 flex Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 같은 flex Item이 2개이고 flex-shrink가 각각 2와 1이라면,
감소 너비는 2:1 비율이며,
첫 번째 flex Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 flex Item은 90px의 1/3인 30px 만큼 너비가 감소합니다.
다른 예시로 flex container의 너비가 줄어 flex Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 다른 flex Item이 2개이고 요소 너비는 각각 200px과 100px이고, flex-shrink가 각각 2와 1이라면,
200 x 2 = 400과 100 x 1 = 100 즉 감소 너비는 4:1 비율이며,
첫 번째 flex Item은 90px의 4/5인 72px 만큼 너비가 감소하고,
두 번째 flex Item은 90px의 1/5인 18px 만큼 너비가 감소합니다.
[ flex-shrink ]
flex-shrink 예제
flex-basis
flex-basis 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다. auto 값을 가지지 않은 flex-basis와 width(flex-direction: column인 경우 height) 값을 동시에 적용한 경우 flex-basis가 우선합니다. flex item의 너비 기본값을 px, % 등의 단위로 지정하며, 기본값은 auto입니다. flex-basis 속성값은 content 키워드를 사용하거나, <width>를 나타내는 단위를 사용합니다.
flex-basis는 플렉스 요소의 초기 크기를, flex-grow는 확장 비율을, flex-shrink는 축소 비율을 지정합니다.
주축이 row일 때는 너비(width), column일 때는 높이(height)를 기준으로 계산합니다.
flex-grow 계산 방법
flex-grow는 컨테이너에 남은 공간이 있을 때, 각 요소가 얼마나 확장될지를 결정합니다.
위 코드에서 flex: 1 0 50px는 flex-grow: 1, flex-shrink: 0, flex-basis: 50px를 의미합니다. shrink: 0이므로 최소 50px보다 축소되지 않으며, grow: 1이므로 50px 이상 확장될 수 있습니다.
예를 들어, 아이템이 7개이고 각각 flex-basis: 50px인 경우, 기본 너비 합은 350px입니다.
컨테이너 너비가 500px이면 남은 공간은 150px이며,
모든 아이템의 grow 값이 1이므로 균등하게 나눕니다.
각 아이템은 50px + (150px ÷ 7) = 71.43px로 확장됩니다.
3번째 아이템만 flex-grow: 2로 설정하면, 남은 공간을 비율로 나눕니다.
비율은 1 : 1 : 2 : 1 : 1 : 1 : 1이며, 총 비율 합은 8입니다.
남은 공간이 150px이면, 3번째 아이템은 150px × (2/8) = 37.5px를 추가로 받아
20px + 37.5px = 57.5px가 되고,
다른 아이템들은 각각 150px × (1/8) = 18.75px를 추가로 받아 50px + 18.75px = 68.75px가 됩니다.
flex-shrink 계산 방법
flex-shrink는 컨테이너 너비가 아이템들의 기본 너비 합보다 작을 때, 각 요소가 얼마나 축소될지를 결정합니다.
축소해야 할 공간 = 컨테이너 너비 - 아이템 기본 너비 합이며, shrink 값의 비율에 따라 분배됩니다.
예를 들어, 아이템 7개의 기본 너비 합이 500px이고 컨테이너 너비가 400px이면, 100px을 축소해야 합니다.
모든 아이템의 shrink 값이 1이면 균등하게 축소되며, shrink: 2인 아이템은 다른 아이템보다 2배 더 많이 축소됩니다.
Flexbox Demo
flex의 속성을 이용한 다양한 예제 입니다.
예제의 코드 확인 후 결과 화면을 '브라우저 전체 화면' 또는 '모니터 전체 화면'으로 확인하면 결과물에 대한 이해가 조금 더 용이해집니다.
