CSS Flexbox 및 그리드: 반응형 레이아웃 구축의 기술
유연한 유연한 레이아웃
디스플레이: 플렉스
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 미만인 경우 미디어 쿼리는 모바일 장치에 맞게 단일 열 레이아웃으로 전환됩니다.
Flexbox와 그리드 선택
Flexbox 또는 Grid 사용 선택은 일반적으로 특정 요구 사항에 따라 다릅니다.
- Flexbox는 행이나 열의 요소 배열은 물론 요소 정렬 및 패딩과 같은 1차원 레이아웃을 처리하는 데 적합합니다.
- CSS 그리드는 테이블이나 복잡한 그리드 레이아웃과 같은 2차원 레이아웃을 처리하고 셀을 정밀하게 제어하는 데 더 적합합니다.
위 내용은 CSS Flexbox 및 그리드: 반응형 레이아웃 구축의 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.

Google Fonts가 새로운 디자인 (트윗)을 출시 한 것을 볼 수 있습니다. 마지막 큰 재 설계와 비교할 때 이것은 훨씬 더 반복적 인 느낌이 듭니다. 차이를 간신히 말할 수 있습니다

프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.

플렉스 레이아웃의 보라색 슬래시 영역에 대한 질문 플렉스 레이아웃을 사용할 때 개발자 도구 (d ...)와 같은 혼란스러운 현상이 발생할 수 있습니다.

요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

프론트 엔드 개발에서 Windows와 같은 구현 방법 ...
