CSS 그리드 레이아웃과 플렉스 레이아웃이란 무엇입니까?

CSS에서 그리드 레이아웃은 "그리드 레이아웃"을 의미하며 행과 열을 모두 처리할 수 있는 2차원 시스템입니다. 그리드 레이아웃은 CSS 규칙을 해당 요소의 상위 요소와 하위 요소에 적용하여 사용할 수 있습니다. 플렉스 레이아웃은 "탄성적 레이아웃"을 의미하며, 상자 모양의 모델에 최대한의 유연성을 제공하는 데 사용되는 1차원 시스템입니다.

이 기사의 운영 환경: windows10 시스템, CSS3, thinkpad t480 컴퓨터.

(추천 튜토리얼: CSS 동영상 튜토리얼)

1. Flex 레이아웃 소개

Flex는 유연한 상자(Flexible 레이아웃)에 대한 소개로, 상자에 최대한의 유연성을 제공하는 데 사용되는 1차원 시스템입니다. 모양의 모델.

사용법: 모든 컨테이너(인라인 요소는 표시:inline-block으로 설정 가능)

특징: 공간은 전체가 아닌 행에 분산됩니다.

2. 그리드 레이아웃 소개

그리드 레이아웃( CSS Grid Layout)은 CSS에서 가장 강력한 레이아웃 시스템으로 행과 열을 모두 처리할 수 있는 2차원 시스템으로, 상위 요소(그리드 컨테이너)와 그 하위 요소에 CSS 규칙을 적용하여 사용할 수 있습니다. 요소(그리드 요소)는 그리드 레이아웃을 사용합니다.

사용법: 상위 요소에 dispay:grid-template-colums 및 Grid-template-rows를 설정하여 행과 열 수를 설정한 다음 하위 요소가 차지하는 행과 열 수를 설정합니다.

기능: 2차원 그리드 구조, 매우 조작하기 쉽습니다

연습 1: 그리드 레이아웃을 사용하여 간단한 9각형 그리드 만들기

html 코드:

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

css 코드:

.box{
    width: 1200px;
    height: 80vh;
    display: grid;  // 开启grid布局
    grid-template-columns: repeat(3,30%);   // 设置列
    grid-template-rows: repeat(3,30%);  // 设置行
    grid-column-gap: 20px; // 设置网格之间的间距
    grid-row-gap: 20px; // 设置网格之间的间距
}
.box div{
    background-color: #34ce57;
}

연습 2: 만들기 일반적으로 사용되는 웹 사이트 레이아웃

html 코드 :

<div class="box">
    <div class="header">header</div>
    <div class="content">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

css 코드:

.box {
    width: 1200px;
    height: 80vh;
    display: grid; // 开启grid布局
    grid-template-rows: 10% 80% 10%;  // 设置行数
}
.header {
    background-color: #6ac13c;
    display: grid;
    /*居中*/
    align-content: center;
    justify-content: center;
}
.content {
    /*background-color: #f1b0b7;*/
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-gap: 20px;  // 网格之间的间隔
}
.footer {
    background-color: #ffc107;
    display: grid;
    align-items: center;
    justify-content: center;
}
.left {
    background-color: #5599FF;
}
.center {
    background-color: lightgreen;
}
.right {
    background-color: orchid;
}

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS 그리드 레이아웃과 플렉스 레이아웃이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!