CSS에서 그리드 레이아웃은 행과 열을 동시에 처리 할 수있는 2 차원 시스템 인 "그리드 레이아웃"을 의미합니다. CSS 규칙을 상위 요소와 하위 요소에 적용하여 그리드 레이아웃을 사용할 수 있습니다. 플렉스 레이아웃은 "유연한 레이아웃"을 의미하며 박스 모델에 최대한의 유연성을 제공하는 데 사용되는 1 차원 시스템입니다.
(추천 튜토리얼 : CSS 비디오 튜토리얼)
1. 플렉스 레이아웃 소개
Flex는 유연한 박스 (유연한 레이아웃)에 대한 소개로 박스 모델에 최대한의 유연성을 제공하기 위해 사용되는 1 차원 시스템입니다.
용도 : 모든 컨테이너 (인라인 요소를 표시하도록 설정할 수 있음 : 인라인 블록)
기능 : 공간 분배가 전체가 아닌 라인에서 수행됩니다
. 2. 그리드 레이아웃 소개
Gird 레이아웃 (css 그리드 레이아웃)은 가장 강력한 레이아웃입니다. in CSS 시스템은 행과 열을 동시에 처리 할 수있는 2 차원 시스템입니다. CSS 규칙을 상위 요소 (그리드 컨테이너)와 요소의 하위 요소 (그리드 요소)에 적용하여 그리드 레이아웃을 사용할 수 있습니다. .
사용 : 상위 요소에 대한 dispay를 설정 : grid; grid-template-colums 및 grid-template-rows로 여러 행과 여러 열을 설정 한 다음 하위 요소가 여러 행과 여러 열을 차지하도록 설정합니다.
기능 : 2 차원 그리드 구조, 작동 및
전투가 매우 쉽습니다. 하나 : 그리드 레이아웃을 사용하여 9 개의 사각형 그리드
의 간단한 HTML 코드 를 만듭니다 .
1
2
3
4
5
6
7
8
9
10
11
CSS 번호 :
1
2
3
4
5
6
7
8
9
10
11
12
.box { 폭 : 1200 픽셀, 높이 : 80vh; 디스플레이 : 그리드 // 그리드 레이아웃 가능 격자 템플릿 컬럼 : 반복 (3,30 %)을 / / 열 설정 grid-template-rows : repeat (3,30 %); // grid-column-gap : 20px; // 그리드 간격 설정 grid-row-gap : 20px; // 그리드 설정 그리드 사이의 공간 } .box div { background-color : # 34ce57; } 실제 전투 2 : 공통 웹 사이트 레이아웃 만들기 html 코드 : 1 2 3 4 5 6 7 8 9
머리글
왼쪽
센터
권리
보행인
CSS 번호 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.box { 폭 : 1200 픽셀, 높이 : 80vh; 디스플레이 : grid; // 그리드 레이아웃을 켭니다 grid-template-rows : 10 % 80 % 10 %; // 행 수 설정 } .header { background-color : # 6ac13c;
디스플레이 : 그리드;
/ * 居中 * /
align-content : 센터;
정당화 내용 : 센터;
}
.content { / * background-color : # f1b0b7; * / display : grid; 그리드 템플릿 열 : 10 % 80 % 10 %; 그리드 간격 : 20px; // 网格 之间 的 间隔} .footer { background-color : # ffc107; 디스플레이 : 그리드; 정렬 항목 : 가운데; 정당화 내용 : 센터; } .left { 배경색 : # 5599FF; } .center { 배경색 : 연녹색; } .right { 배경색 : 난초; }