CSS Flexbox 및 그리드: 반응형 레이아웃 구축의 기술-CSS 튜토리얼-php.cn

CSS Flexbox and Grid: The Art of Building Responsive Layouts

유연한 유연한 레이아웃

디스플레이: 플렉스

Flex 레이아웃 모드를 켭니다. 요소를 Flex 컨테이너로 설정하면 해당 하위 요소가 Flex 항목이 됩니다.

.container {
    display: flex;
}

로그인 후 복사

플렉스 방향

주축 방향(항목 배열 방향)을 정의합니다. 선택 값:

행(기본값): 가로, 왼쪽에서 오른쪽으로.
row-reverse: 가로, 오른쪽에서 왼쪽으로
열: 수직, 위에서 아래로
column-reverse: 수직, 아래에서 위로.

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

로그인 후 복사

플렉스 랩

연속 공간이 부족할 때 줄 바꿈 여부를 제어합니다. 선택 값:

nowrap(기본값): 포장하지 않고 항목이 컨테이너를 넘길 수 있습니다.
wrap: 감싸다, 항목을 여러 줄로 배열합니다.
wrap-reverse: 줄 바꿈, 첫 번째 줄이 아래쪽에 있고 그 다음 줄은 위쪽으로 배열됩니다.

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

로그인 후 복사

정당화 내용

주축의 정렬을 정의합니다. 선택 값:

flex-start(기본값): 항목이 시작점에 정렬됩니다.
flex-end: 항목이 끝점에 맞춰 정렬됩니다.
center: 항목이 중앙에 정렬됩니다.
space-between: 항목 사이의 간격을 균등하게 분배합니다. 첫 번째 항목과 마지막 항목이 각각 컨테이너 끝에 연결됩니다.
space-around: 항목 사이의 간격을 균등하게 분배합니다. 항목 양쪽의 간격이 동일합니다.
space-evenly: 항목 사이의 간격을 균등하게 분배합니다. 항목과 컨테이너 가장자리 사이의 간격과 항목 사이의 간격이 동일합니다.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

로그인 후 복사

항목 정렬

교차축의 정렬을 정의합니다. 선택 값:

늘이기(기본값): 항목이 전체 교차 축을 채우도록 늘어납니다.
flex-start: 항목이 교차축의 시작 부분에 정렬됩니다.
flex-end: 항목이 교차축의 끝에 정렬됩니다.
center: 항목이 교차축 중앙에 배치됩니다.
기준선: 항목이 기준선에 따라 정렬됩니다.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

로그인 후 복사

내용 정렬

여러 줄의 Flex 레이아웃(flex-wrap: Wrap)에서만 작동하며 교차 축에서 여러 줄 항목의 정렬을 정의합니다. 선택 값:

늘이기(기본값): 각 행이 전체 교차 축을 채우기 위해 늘어납니다.
flex-start: 각 행이 교차축의 시작 부분에 정렬됩니다.
flex-end: 각 행이 교차축의 끝에 정렬됩니다.
center: 각 행이 교차축의 중심에 정렬됩니다.
space-between: 각 행 사이의 간격을 균등하게 분배하고 첫 번째 행과 마지막 행을 각각 컨테이너의 양쪽 끝에 붙입니다.
space-around: 각 행 사이의 공간을 균등하게 분배하고, 행 양쪽의 공간이 동일합니다.

.container {
    display: flex;
}

로그인 후 복사

주문하다

항목의 순서를 정의합니다. 값이 작을수록 순서가 높아집니다. 기본값은 0입니다.

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

로그인 후 복사

유연하게 성장하다

항목의 확대 비율을 정의합니다. 기본값은 0이며 이는 확대되지 않음을 의미합니다. 모든 항목을 0이 아닌 값으로 설정하면 남은 공간은 비례적으로 분배됩니다.

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

로그인 후 복사

플렉스 수축

상품의 수축률을 정의합니다. 기본값은 1이며 축소할 수 있음을 의미합니다. 모든 항목이 0이 아닌 값으로 설정되면 컨테이너가 넘치지 않도록 비례적으로 축소됩니다.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

로그인 후 복사

플렉스 기반

나머지 공간이 분배되기 전 항목의 초기 크기를 정의합니다. 길이, 백분율, 자동(기본값) 또는 내용 값을 허용합니다.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

로그인 후 복사

몸을 풀다

flex-grow, flex-shrink 및 flex-basis의 약어입니다. 기본값은 0 1 자동입니다.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

로그인 후 복사

자기 정렬

컨테이너의 align-items 속성을 재정의하여 교차 축에서 단일 항목의 정렬을 정의합니다. 선택값은 align-items와 동일합니다.

.item {
    order: <integer>;
}

로그인 후 복사

그리드 그리드 레이아웃

디스플레이: 그리드;

그리드 레이아웃 모드를 켜세요. 요소를 그리드 컨테이너로 설정하면 해당 요소의 직계 하위 요소가 그리드 항목(셀)이 됩니다.

.item {
    flex-grow: <number>; /* Default is 0 */
}

로그인 후 복사

그리드 템플릿 열 및 그리드 템플릿 행

그리드의 열 및 행 트랙 크기를 정의합니다. 길이, 백분율, fr(그리드 공간의 비율을 나타내는 분수 단위) 또는 자동 값을 허용합니다. 또한, Repeat() 함수를 사용하여 반복 트랙을 생성하고 minmax() 함수를 사용하여 트랙의 최소 및 최대 크기를 정의할 수도 있습니다.

.item {
    flex-shrink: <number>; /* defaults to 1 */
}

로그인 후 복사

그리드 템플릿 영역

항목의 이름을 지정하고 그리드 구조를 문자열로 설명하여 그리드 레이아웃의 영역을 정의합니다. 아이템 이름은 . 빈 셀을 나타냅니다.

.item {
    flex-basis: <length> | <percentage> | auto | content;
}

로그인 후 복사

그리드-갭 또는 그리드-열-갭 및 그리드-행-갭

그리드에서 항목 사이의 간격을 설정합니다. 길이 또는 백분율 값을 허용합니다.

.container {
    display: flex;
}

로그인 후 복사

그리드 자동 열 및 그리드 자동 행

격자를 자동으로 채울 때 새로 추가된 행이나 열의 트랙 크기를 정의합니다. 항목이 정의된 그리드 범위를 초과하는 경우 적용됩니다.

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

로그인 후 복사

그리드 자동 흐름

그리드 항목이 자동으로 채워지고 정렬되는 방식을 제어합니다. 선택 값:

행(기본값): 행별로 채웁니다.
열: 열별로 채웁니다.
dense: 행이나 열이 Dense와 함께 사용될 때 그리드에 공백이 있으면 새 항목은 그리드 끝에 공백을 추가하는 대신 이러한 공백을 채우려고 합니다.

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

로그인 후 복사

그리드-열-시작, 그리드-열-끝, 그리드-행-시작 및 그리드-행-끝

그리드에서 항목의 시작 및 끝 위치를 수동으로 지정합니다.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

로그인 후 복사

그리드 영역

grid-row-start,grid-column-start,grid-row-end,grid-column-end를 동시에 설정하거나,grid-template-areas에 정의된 영역 이름을 참조하기 위한 단축 속성입니다.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

로그인 후 복사

Flexbox와 결합된 CSS 그리드

어떤 경우에는 CSS Grid와 Flexbox의 장점을 결합하여 보다 복잡한 반응형 레이아웃을 만들 수 있습니다.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

로그인 후 복사

먼저 CSS 그리드는 적응형 열 너비가 있는 그리드 레이아웃을 만드는 데 사용됩니다. 각 그리드 항목(하위 요소)은 내부의 Flexbox를 사용하여 콘텐츠를 세로로 가운데에 배치합니다. 화면 너비가 768px 미만인 경우 미디어 쿼리는 모바일 장치에 맞게 단일 열 레이아웃으로 전환됩니다.