[CSS] Flexible Box

Flexible Box Layout

UI디자인과 단방향 레이아웃에 최적화된 모듈

flex container의 자식(flex-item)을 어떤 방향으로도 배치할 수 있고,
flex-item의 크기도 유연하게 빈 공간을 채우거나 컨테이너를 넘어가지 않도록 줄어든다

 

Flex Container 속성

•  

flex-direction

 

왼쪽부터 row, row-reverse, column, column-reverse

initial-value : row

• flex-direction : row 
  • 플렉스 컨테이너의 주축이 행방향으로 글의 작성 방향과 동일하다 (수평축)
    
    

• flex-direction : column
  • 플렉스 컨테이너의 주축이 열방향으로 블록 축과 동일하다 (수직축)

 

접근성 고려사항

row-reverse나 column-reverse의 경우 DOM의 구조와 그 시각적 표현에 차이가 생기게 된다

이는 스크린 리더 등 접근성 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있다.
시각적 순서가 중요하다고 해도, 스크린 리더 사용자는 그 순서가 어떻게 되는지 알 수 없다

 

flex-wrap

 

nowrap - wrap - warp-reverse

flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 가능한 영역에서 벗어나지 않고 나누어 표현 할 것인지 결정하는 속성

 

initial-value : nowrap

• nowrap
• wrap
• wrap-reverse

 

flex-flow (direction, wrap 단축속성)

 

.container {
	flex-flow : flex-direction flex-wrap;
}

initial : row nowrap

 

Container 정렬속성

justify-content (inital : normal)

 

브라우저가 콘텐츠 항목 사이와 주변의 공간을 플렉스 컨테이너에서 주축을 기준으로 어떻게 정렬할 것인지 정의한다.

• normal
  • stretch와 동일하게 동작한다.
    
    

• flex-start
  • 메인 축을 따라 시작 부분의 가장 자리에 밀착되어 정렬된다.
  • 이 값은 플렉스 레이아웃에만 적용된다
    
    
• flex-end
  • 메인 축을 따라 끝 부분의 가장 자리에 밀착되어 정렬된다.
  • 이 값은 플렉스 레이아웃에만 적용된다
    
    
• center
  • 컨테이너의 메인 축을 따라 중앙 부분에 밀착되어 정렬된다
    
    
• space-between
  • 메인 축을 따라 고르게 분포된다.
  • item간의 공간은 동일하게 유지되는데, 첫번째 항목과 마지막 항목은 메인축의 가장자리에 밀착된다
    
    
• space-around
  • 고르게 분포 된다
  • 첫번째 항목의 이전과 마지막 항목의 이후에 존재하는 공간은 인접한 항목 간 공간 크기의 절반
    
    
• space-evenly
  • 모든 공간을 동일하게 유지하면서 고르게 분포한다
    
    

align-items, align-content

initial value : normal

두 속성 모두 주 축의 수직 방향을 기준으로 정렬한다

container의 item이 두 줄일 때부터 차이가 생긴다

align-content의 경우 flex-wrap:wrap 이 적용된 상태에서 의미가 있다

 

align-items의 경우 라인을 기준으로 아이템을 정렬하게 되고, align-content의 경우 라인 자체를 정렬하는 모습을 볼 수 있다.

 

속성값은 justify-content와 같다

 

---

Flex item 속성

flex-basis

initial value : auto

flex item의 초기 크기를 지정한다

 

flex-shrink

initial value : 1

flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용한다.

설정된 숫자 값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다

 

 

flex shrink 0 의 경우 크기가 줄어들지 않고 원래 크기를 유지한다.

 

flex-grow

initial value : 0

flex-item 요소가 flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다

만약 형제 요소로 렌더링 된 모든 item요소가 동일한 grow값을 가지면, 동일한 공간을 할당받는다

값으로 0을 갖게되면 할당받지 않는다

 

flex

flex-grow, flex-shrink, flex-basis의 단축속성

item {
	flex : flex-grow, flex-shrink, flex-basis
}

initial : 0, 1, auto

 

align-self

initial value : auto

container 내 일부 item만 정렬 방법을 변경하고 싶다면 해당 속성을 사용하면 된다

auto의 경우 align-items의 값을 상속받는다