CSS3 플렉스 박스(플렉스 박스)

레이아웃은 웹 애플리케이션의 스타일 디자인에서 매우 중요한 부분입니다. 레이아웃은 페이지에 있는 다양한 구성 요소와 요소의 크기와 위치를 결정하는 데 사용됩니다. 반응형 사용자 인터페이스의 인기로 인해 웹 애플리케이션은 일반적으로 다양한 장치 크기와 브라우저 해상도에 적응해야 합니다. 반응형 사용자 인터페이스 디자인의 가장 중요한 측면은 레이아웃입니다. 창 크기에 따라 레이아웃을 조정해야 하며, 최상의 디스플레이 효과를 얻으려면 구성 요소의 크기와 위치를 변경해야 합니다. 이는 또한 레이아웃 논리를 더욱 복잡하게 만듭니다.

이 기사에서는 CSS3 사양에 도입된 새로운 레이아웃 모델인 플렉스 박스 모델을 소개합니다. Flexbox 모델은 간단한 방법으로 여러 가지 일반적인 복잡한 레이아웃 요구 사항을 충족할 수 있습니다. 장점은 개발자가 특정 구현 방법을 제공하지 않고 레이아웃이 가져야 하는 동작만 선언한다는 것입니다. 브라우저는 실제 레이아웃을 담당합니다. 이 레이아웃 모델은 주요 브라우저에서 지원됩니다.

CSS3 유연한 상자 콘텐츠

Flexible 상자는 Flex 컨테이너와 Flex 항목으로 구성됩니다.

플렉서블 컨테이너는 디스플레이 속성 값을 flex 또는 inline-flex로 설정하여 플렉서블 컨테이너로 정의됩니다.

유연한 컨테이너에는 하나 이상의 유연한 하위 요소가 포함되어 있습니다.

참고: 유연한 컨테이너 외부와 유연한 하위 요소 내에서는 정상적으로 렌더링됩니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다.

Flexible 하위 요소는 일반적으로 Flexbox 내 한 행에 표시됩니다. 기본적으로 컨테이너당 하나의 행만 있습니다.

      
  
 
 1
 
 2
 
 3
 
  

flex-direction property

상위 컨테이너에서 플렉스 박스 객체의 하위 요소 위치를 설정하거나 검색합니다.

Syntax

flex-direction: 행 | 행 역방향 | 열 | 열 역방향

행: 왼쪽에서 오른쪽으로(왼쪽 정렬) 정렬됩니다.

row-reverse: 가로 배열을 반대로 합니다(오른쪽 정렬, 뒤에서 앞으로, 마지막 항목이 앞에 옵니다.

column: 세로 배열.

row-reverse: 세로 배열을 반대로 합니다. 뒤로 앞으로는 마지막 항목이 맨 위에 있습니다.

Firefox, Opera 및 Chrome은 flex-direction 속성을 지원합니다

justify-content 속성

주축(가로축) 방향으로 Flexbox 요소의 정렬을 설정하거나 검색합니다.

이 속성은 Flexbox 행의 모든 하위 요소를 축소할 수 없거나 최대 크기에 도달한 경우에 도움이 될 수 있습니다. 이 속성은 정렬도 제어합니다. 요소가 행을 오버플로하는 경우.

Syntax

justify-content: flex-start | flex-end | center | space-around

flex-start: 행 위치 정렬. 행의 첫 번째 자식의 기본 시작 가장자리는 행의 기본 시작 가장자리와 정렬되고 모든 후속 Flex 항목은 이전 항목과 정렬됩니다.

flex-end: 플렉스 박스 요소가 행의 끝을 향해 정렬됩니다. 행의 첫 번째 하위 요소의 기본 끝 가장자리는 행의 기본 끝 가장자리와 정렬되고 모든 후속 플렉스 항목은 이전 항목과 정렬됩니다.

center: Flexbox 요소가 행 중앙에 정렬됩니다. 행의 하위 요소는 서로 정렬되고 행 내 중심에 배치됩니다. 첫 번째 요소는 행의 기본 시작 위치에서 마지막 요소가 행의 기본 끝 위치에서 갖는 만큼의 여백을 갖습니다(나머지 공간이 있는 경우). 음수이면 양쪽 끝에서 동일한 길이의 오버플로가 유지됩니다.

space-between: Flexbox 요소가 행에 고르게 분산됩니다. 가장 왼쪽에 남은 공간이 음수이거나 행에 하위 항목이 하나만 있는 경우 이 값은 'flex-start'와 동일합니다. 다른 경우에는 첫 번째 요소의 여백은 줄의 기본 시작 여백과 정렬되고, 마지막 요소의 여백은 줄의 기본 끝 여백과 정렬되며, 나머지 플렉스 항목은 고르게 분포됩니다. 둘.

space-around: Flexbox 요소는 행에 균등하게 분산되어 양쪽 끝의 하위 요소 사이에 공간의 절반을 남깁니다. 가장 왼쪽의 남은 공간이 음수이거나 행에 Flexbox 항목이 하나만 있는 경우 이 값은 'center'와 동일합니다. 다른 경우에는 플렉스 박스 항목이 균등한 간격으로 배치되어 항목 사이에 동일한 공백이 있으며 첫 번째 요소 앞의 공간은 절반이고 마지막 요소 뒤의 공간은 항목 사이의 공간이 절반입니다.

      
  
flex-direction:row
 
 
a
 
b
 
c
 
 
flex-direction:row-reverse
 
 
a
 
b
 
c
 
 
flex-direction:column
 
 
a
 
b
 
c
 
 
flex-direction:column-reverse
 
 
a
 
b
 
c
 
  

align-items 속성

플렉스 박스 요소의 교차축(세로축) 방향 정렬을 설정하거나 검색합니다.

Syntax

align-items: flex-start | flex-end | center | Stretch 위치의 경계는 행의 교차축 시작 경계에 바로 인접합니다.

flex-end: 플렉스박스 요소의 가로축(세로축) 시작 위치의 경계가 행의 가로축 끝 경계에 가깝습니다.

center: Flexbox 요소는 행의 교차축(세로축) 중앙에 위치합니다. (행의 크기가 Flexbox 요소의 크기보다 작으면 양방향으로 동일한 길이로 오버플로됩니다.)

baseline: 플렉스 박스 요소의 인라인 축과 측면 축이 동일한 경우 이 값은 'flex-start'와 동일합니다. 그렇지 않으면 이 값이 기준선 정렬에 참여하게 됩니다.

stretch: 교차 축 크기를 지정하는 속성 값이 'auto'인 경우 해당 값은 항목의 여백 상자 크기를 행 크기에 최대한 가깝게 만들지만 동시에 'min/ 최대 너비/높이' 속성 제한.

      
  
 
a
 
b
 
c
 
 
justify-content:flex-end
 
 
a
 
b
 
c
 
 
justify-content:center
 
 
a
 
b
 
c
 
 
justify-content:space-between
 
 
a
 
b
 
c
 
 
justify-content:space-around
 
 
a
 
b
 
c
 
  

flex-wrap attribute

플렉스 박스 객체의 하위 요소가 상위 컨테이너를 초과할 때 래핑할지 여부를 설정하거나 검색합니다.

Syntax

flex-wrap: nowrap | Wrap | Wrap-reverse

nowrap: 하위 요소가 상위 컨테이너를 오버플로할 때 래핑하지 마세요.

wrap: 하위 요소가 상위 컨테이너를 오버플로하면 자동으로 래핑됩니다.

wrap-reverse: 랩 배열을 반대로 합니다.

      
  
align-items:flex-start
 
 
a
 
b
 
c
 
 
align-items:flex-end
 
 
a
 
b
 
c
 
 
align-items:center
 
 
a
 
b
 
c
 
 
align-items:baseline
 
 
a
 
b
 
c
 
 
align-items:strecth
 
 
a
 
b
 
c
 
  

align-content 속성

flexbox 스택 flex 행의 정렬을 설정하거나 검색합니다.

Syntax

align-content: flex-start | space-around | Stretch

flex-start: 컨테이너 시작 위치가 스택되었습니다. Flexbox 컨테이너에 있는 첫 번째 행의 교차축 시작 가장자리는 Flexbox 컨테이너의 교차축 시작 가장자리에 인접하고 각 후속 행은 이전 행에 인접합니다.

flex-end: 각 행은 플렉스 박스 컨테이너의 끝을 향해 쌓입니다. Flexbox 컨테이너의 마지막 행의 교차축 끝 경계는 Flexbox 컨테이너의 교차축 끝 경계에 가깝고 각 후속 행은 이전 행에 가깝습니다.

center: 각 행은 Flexbox 컨테이너의 중앙을 향해 쌓입니다. 행은 2개씩 정렬되고 Flex 컨테이너의 중앙에 배치되어 Flex 컨테이너의 교차축 시작 콘텐츠 가장자리와 첫 번째 행 사이의 거리와 컨테이너의 교차축 끝 콘텐츠 가장자리와 마지막 행 사이의 거리를 유지합니다. 거리는 동일합니다. (남은 공간이 음수인 경우 행은 양방향으로 동일한 거리로 쏟아집니다.)

space-between: 행은 Flexbox 컨테이너에 고르게 분포됩니다. 남은 공간이 음수이거나 Flex 컨테이너에 행이 하나만 있는 경우 이 값은 'flex-start'와 동일합니다. 다른 경우에는 첫 번째 행의 교차 축 시작 가장자리가 Flex 컨테이너의 교차 시작 콘텐츠 가장자리에 있고, 마지막 행의 교차 축 끝 가장자리가 Flex 컨테이너의 교차 축 끝 가장자리에 있고, 나머지 행은 다음과 같이 배열됩니다. Flexbox 창 사이의 공간이 동일하도록 합니다.

space-around: 각 행은 Flexbox 컨테이너에 고르게 분산되어 양쪽 끝의 하위 요소 사이에 공간의 절반을 남겨 둡니다. 남은 공간이 음수이거나 Flexbox 컨테이너에 행이 하나만 있는 경우 이 값은 'center'와 동일합니다. 다른 경우에는 행 사이의 공간이 동일하고 첫 번째 행 앞과 마지막 행 뒤의 공간이 다른 행 공간의 절반이 되는 방식으로 행이 Flexbox 컨테이너에 배열됩니다.

늘이기: 각 행이 늘어나 나머지 공간을 차지합니다. 남은 공간이 음수인 경우 이 값은 'flex-start'와 동일합니다. 다른 경우에는 교차축 크기를 확장하기 위해 남은 공간을 모든 행에 균등하게 나누어줍니다.

      
  
 
a
 
b
 
c
 
 
flex-wrap:wrap
 
 
a
 
b
 
c
 
 
flex-wrap:wrap-reverse
 
 
a
 
b
 
c
 
  

order 속성

Flexbox 모델 객체의 하위 요소가 나타나는 순서를 설정하거나 검색합니다.

Syntax

order:

: 앞에 작은 값을 포함하여 정렬 순서를 정의하려면 정수 값을 사용하세요. 부정적일 수 있습니다.

      
  
align-content:flex-start
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:flex-end
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:center
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:space-between
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:space-around
 
 
a
 
b
 
c
 
d
 
e
 
f
 
 
align-content:strecth
 
 
a
 
b
 
c
 
d
 
e
 
f
 
  

align-self 속성

flexbox 요소 자체의 교차축(세로축) 방향 정렬을 설정하거나 검색합니다.

Syntax

align-self: auto | flex-end | center | Stretch

auto: 'auto' 그런 다음 요소 상위 요소의 'align-items' 값으로 평가되고, 상위 요소가 없는 경우 'stretch'로 평가됩니다.

flex-start: 플렉스박스 요소의 교차축(세로축) 시작 위치의 경계가 행의 교차축 시작 경계에 가깝습니다.

flex-end: 플렉스박스 요소의 교차축(세로축) 시작 위치의 경계가 행의 교차축 끝 경계에 가깝습니다.

center: Flexbox 요소는 행의 교차축(세로축) 중심에 있습니다. (행의 크기가 Flexbox 요소의 크기보다 작은 경우 양방향으로 동일한 길이로 오버플로됩니다.)

baseline: 플렉스 박스 요소의 인라인 축과 측면 축이 동일한 경우 이 값은 'flex-start'와 동일합니다. 그렇지 않으면 이 값이 기준선 정렬에 참여하게 됩니다.

stretch: 교차축 크기를 지정하는 속성 값이 'auto'인 경우 해당 값은 항목의 여백 상자 크기를 행 크기에 최대한 가깝게 만들지만 동시에 다음을 준수합니다. 'min/max-width/height' 속성 제한.

      
  
 
a
 
b
 
c
 
d
 
e
 
  

플렉스 속성

복합 속성. Flex Box 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색합니다.

약어가 flex:1인 경우 계산된 값은 다음과 같습니다. 1 1 0

Syntax

flex: none | - based ]

none: none 키워드의 계산된 값은 다음과 같습니다. 0 0 auto

[ flex-grow ]: 플렉스 박스 요소의 확장 비율을 정의합니다.

[ flex-shrink ]: 플렉스 박스 요소의 수축 비율을 정의합니다.

[ flex-basis ]: 플렉스 박스 요소의 기본 기준 값을 정의합니다.

      
  
 
a
 
b
 
c
 
d
 
e
 
f
 
g
 
h
 
i