플렉스박스 : 부모속성

Flexbox 속성

 부모 속성 
(flex container)

 display 

display는 플렉스 컨테이너를 정의합니다. 

주어진 값에 따라 인라인 또는 블록. 모든 직계 자식에 대해 플렉스 컨텍스트를 활성화합니다.

 

.container { 
display: flex; /* or inline-flex */
}

CSS 열은 플렉스 컨테이너에 영향을 미치지 않습니다.

 

 

 flex-direction 

 

flex-direction은 주축을 설정하여 플렉스 아이템이 플렉스 컨테이너에 배치되는 방향을 정의합니다. 

Flexbox는 단일 방향 레이아웃 개념입니다. 플렉스 항목은 주로 가로 행 또는 세로 열에 배치되는 것으로 생각하십시오.

 

 

.container { 
flex-direction: row | row-reverse | column | column-reverse; 
}

• row(기본값) :  왼쪽에서 오른쪽으로 in ltr; 오른쪽에서 왼쪽으로 in rtl
• row-reverse: 오른쪽에서 왼쪽으로 in ltr; 왼쪽에서 오른쪽으로 in rtl
• column: row같지만 위에서 아래로
• column-reverse: row-reverse같지만 아래에서 위로

 flex-wrap 

 

 

기본적으로 플렉스 항목은 모두 한 줄에 맞추려고합니다. 이를 변경하고이 속성을 사용하여 필요에 따라 항목을 래핑 할 수 있습니다.

 

.container { 
flex-wrap: nowrap | wrap | wrap-reverse; 
}

• nowrap (기본값) : 모든 플렉스 항목이 한 줄에 있습니다.
• wrap: 플렉스 항목은 위에서 아래로 여러 줄로 줄 바꿈됩니다.
• wrap-reverse: 플렉스 아이템은 아래에서 위로 여러 줄로 줄 바꿈됩니다.

.

 flex-flow 

이는 플렉스 컨테이너의 기본 및 교차 축을 함께 정의하는 flex-direction및 flex-wrap속성 의 약자입니다 . 기본값은 row nowrap입니다.

 

.container { 
flex-flow: column wrap; 
}

 

 justify-content 

 

 

justify-content 는 주축을 따라 정렬을 정의합니다. 

한 줄의 모든 플렉스 항목이 유연하지 않거나 유연하지만 최대 크기에 도달했을 때 남은 여유 공간을 분산하는 데 도움이됩니다. 또한 항목이 줄을 넘을 때 항목의 정렬을 일부 제어합니다.

 

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

 

• flex-start (기본값) : 항목이 플렉스 방향의 시작을 향해 포장됩니다.
• flex-end: 항목이 플렉스 방향 끝쪽으로 포장됩니다.
• start: 품목은 방향의 시작을 향해 포장 writing-mode됩니다.
• end: 품목은 writing-mode방향 끝쪽으로 포장 됩니다.
• left: 그와 이해가되지 않습니다하지 않는 항목은 컨테이너의 왼쪽 가장자리쪽으로 포장 flex-direction그것은처럼 작동, start.
• right: 그와 이해가되지 않습니다하지 않는 항목은, 컨테이너의 오른쪽 가장자리쪽으로 포장 flex-direction그것은처럼 작동, end.
• center: 항목이 선을 따라 중앙에 배치됩니다.
• space-between: 품목이 라인에 균등하게 분배됩니다. 첫 번째 항목은 시작 줄에 있고 마지막 항목은 끝 줄에 있습니다.
• space-around: 항목이 주위에 동일한 공간을두고 일렬로 고르게 분포됩니다. 모든 항목이 양쪽에 동일한 공간을 가지고 있기 때문에 시각적으로 공간이 동일하지 않습니다. 첫 번째 항목은 컨테이너 가장자리에 대해 한 단위의 공간을 가지지 만 다음 항목에는 적용되는 자체 간격이 있기 때문에 다음 항목 사이에 두 단위의 공간이 있습니다.
• space-evenly: 두 항목 사이의 간격 (및 가장자리까지의 공간)이 같도록 항목이 분산됩니다.

이러한 값에 대한 브라우저 지원은 미묘합니다. 예를 들어 space-between일부 버전의 Edge에서 지원을받지 못했고 시작 / 종료 / 왼쪽 / 오른쪽이 아직 Chrome에 없습니다. MDN 에는 자세한 차트가 있습니다. 가장 안전한 값은 flex-start, flex-end하고 center.

이러한 값과 쌍을 이룰 수있는 두 개의 추가 키워드 ( safe및)도 unsafe있습니다. 를 사용 safe하면 이러한 유형의 위치 지정을 수행하지만 콘텐츠를 스크롤 할 수없는 방식 ( "데이터 손실"이라고 함)과 같은 방식으로 화면 외부 (예 : 상단에서) 렌더링되도록 요소를 푸시 할 수 없습니다. .

 

 

 

 align-items 

align-items는 현재 라인 의 교차 축을 따라 플렉스 아이템이 배치되는 방식에 대한 기본 동작을 정의합니다 . justify-content교차 축 (주축에 수직) 의 버전 이라고 생각하십시오 .

 

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

 

• stretch (기본값) : 컨테이너를 채우기 위해 늘이기 (여전히 최소 너비 / 최대 너비를 준수 함)
• flex-start/ start/ self-start: 항목이 교차 축의 시작 부분에 배치됩니다. 이들의 차이점은 미묘하며 flex-direction규칙이나 writing-mode규칙을 준수하는 것입니다.
• flex-end/ end/ self-end: 항목이 교차 축의 끝에 배치됩니다. 차이점은 미묘하며 flex-direction규칙과 writing-mode규칙을 존중하는 것 입니다.
• center: 항목이 교차 축의 중앙에 위치합니다.
• baseline: 기준선 정렬과 같이 항목이 정렬됩니다.

safe및 unsafe수정 키워드는 모든 키워드의 나머지 (비록 노트와 함께 사용할 수있는 브라우저 지원 이 콘텐츠를 액세스 할 수 없게하도록 요소를 정렬되지 않도록 돕는), 및 거래.

 

 

 align-content 

 

justify-content 하면 주축 내에서 개별 항목을 정렬 하는 방법 과 유사하게 교차 축에 추가 공간이있을 때 플렉스 컨테이너의 선이 정렬됩니다 .

참고 : 이 속성 flex-flow은 wrap또는 wrap-reverse)로 설정된 여러 줄의 유연한 컨테이너에만 적용됩니다 . 한 줄의 유연한 컨테이너 (즉, flex-flow기본값으로 설정된 경우 no-wrap)는를 반영하지 않습니다 align-content.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

 

• normal (기본값) : 값이 설정되지 않은 것처럼 항목이 기본 위치에 포장됩니다.
• flex-start/ start: 용기의 시작 부분까지 포장 된 품목. (더 많은 지원) 은 방향을 flex-start존중하는 flex-direction동안을 start존중합니다 writing-mode.
• flex-end/ end: 용기 끝에 포장 된 품목. (더 많은 지원) 은 방향을 flex-end존중하는 flex-direction동안을 존중합니다 writing-mode.
• center: 컨테이너 중앙에있는 항목
• space-between: 항목이 고르게 분포 됨 첫 번째 줄은 컨테이너의 시작 부분에 있고 마지막 줄은 끝 부분에 있습니다.
• space-around: 각 줄 주위에 균등하게 분포 된 항목
• space-evenly: 항목 주위에 동일한 공간을두고 균등하게 배포됩니다.
• stretch: 남은 공간을 차지하도록 선이 늘어납니다.

safe및 unsafe수정 키워드는 모든 키워드의 나머지 (비록 노트와 함께 사용할 수있는 브라우저 지원 이 콘텐츠를 액세스 할 수 없게하도록 요소를 정렬되지 않도록 돕는), 및 거래.

 

 

참고 사이트 : 

css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content

A Complete Guide to Flexbox | CSS-Tricks

 

 

 

flexboxfroggy.com/#ko

Flexbox Froggy