Was sind CSS-Grid-Layout und Flex-Layout?

In CSS bezieht sich Rasterlayout auf „Rasterlayout“ und ist ein zweidimensionales System, das sowohl Zeilen als auch Spalten verarbeiten kann, indem CSS-Regeln auf das übergeordnete Element und die untergeordneten Elemente dieses Elements angewendet werden. und Flex-Layout bezieht sich auf „elastisches Layout“, ein eindimensionales System, das maximale Flexibilität für kastenförmige Modelle bietet.

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS3, Thinkpad T480-Computer.

(Empfohlenes Tutorial: CSS-Video-Tutorial)

1. Einführung in das Flex-Layout

Flex ist eine Einführung in die flexible Box (flexibles Layout). Es handelt sich um ein eindimensionales System, das maximale Flexibilität für die Box bietet -förmige Modelle. ( CSS Grid Layout) ist das leistungsstärkste Layoutsystem in CSS. Es ist ein zweidimensionales System, das sowohl Zeilen als auch Spalten verarbeiten kann. Es kann durch Anwenden von CSS-Regeln auf das übergeordnete Element (Rastercontainer) und dessen untergeordnete Elemente verwendet werden Element (Rasterelement), um das Rasterlayout zu verwenden.

Verwendung: Legen Sie dispay: Grid; Grid-Template-Colums und Grid-Template-Rows für das übergeordnete Element fest, um die Anzahl der Zeilen und Spalten festzulegen, und legen Sie dann die Anzahl der Zeilen und Spalten fest, die das untergeordnete Element einnimmt.

Funktionen: zweidimensionale Gitterstruktur, sehr einfach zu bedienen

Übung 1: Verwenden Sie das Rasterlayout, um ein einfaches Neunquadratgitter zu erstellen

HTML-Code:

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

CSS-Code:

.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;
}

Übung 2: Erstellen ein häufig verwendetes Website-Layout

<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>

.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;
}

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo

Das obige ist der detaillierte Inhalt vonWas sind CSS-Grid-Layout und Flex-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!