Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

不言Original: 2018-11-09 09:41:274065Durchsuche

In diesem Artikel verwenden wir die Eigenschaft „flex-grow“ in Flexbox, um das Verhalten der Erweiterung der Rahmenbreite zu implementieren, wenn die Breite des Rahmens umläuft und größer als nötig wird.

Verwenden Sie die Eigenschaft „flex-grow“, um die Breite des Rahmens in Flexbox anzugeben, wenn dieser breiter als nötig ist.

Syntax:

flex-grow :(数量）

Codebeispiel:

flex-grow.html

<!DOCTYPE html>
<html>
<head>    
<meta charset="utf-8" />    
<title></title>  
<link rel="stylesheet" href="flex-grow.css" />
</head>
<body>  
<div class="container">
    <div class="frameA">第一个内容<br/>php中文网<br />php中文网</div>
    <div class="frameB">第二个内容<br />php中文网<br /></div>
    <div class="frameC">第三个内容<br />php中文网<br />php中文网</div>
    <div class="frameD">第四个内容<br />php中文网<br />php中文网</div>
    <div class="frameE">第五个内容<br />php中文网<br />php中文网</div>
  </div>
</body>
</html>

flex-grow.css

.container {
    display: flex;
}
.frameA {
    border: 1px solid #e9006b;
    flex-grow: 5;
}
.frameB {
    border: 1px solid #ff6a00;
    flex-grow: 4;
}
.frameC {
    border: 1px solid #d0b106;
    flex-grow: 3;
}
.frameD {
    border: 1px solid #4aae20;
    flex-grow: 2;
}
.frameE {
    border: 1px solid #01b9b3;
    flex-grow: 1;
}

Erklärung:

Wir setzen Frame-A Flex-Grow auf 5, Frame B Flex-Grow auf 4, Frame C Flex-Grow auf 3, Frame D Flex-2 auf FrameE Flex-Grow 1 . Mit dieser Einstellung wird die Breite des Rahmens weiter vergrößert, selbst wenn er breiter wird als für die Anzeige des Texts erforderlich. In diesem Fall ist das Ausmaß der Frame-Erweiterung FrameA:FrameB:Frame C:Frame D:FrameE = 5:4:3:2:1 Verhältniserweiterung

Ergebnis anzeigen

Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Der unten gezeigte Bildschirm wird angezeigt. Wenn die Fensterbreite schmal ist, wird jeder Rahmen mit der gleichen Breite angezeigt.

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Erhöhen Sie die Fensterbreite. In Staaten, in denen ein Umbruch erforderlich ist, um Text in einem Rahmen anzuzeigen, wird die Breite des Rahmens immer noch mit der gleichen Breite angezeigt.

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Zeigt die gleiche Breite an, wenn der Text im Feld eine unerwünschte Breite aufweist.

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Wenn Sie die Fenstergröße über die erforderliche Breite hinaus erweitern, um den Rahmen ohne Textumbruch anzuzeigen, wird die Größe jedes Rahmens vergrößert. Die Vergrößerung der Framegröße beträgt das Verhältnis FrameA:FrameB:FrameC:FrameD:FrameE = 5:4:3:2:1.

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Legen Sie die Flex-Grow-Eigenschaft in nur einem Feld fest.

Ändern Sie den CSS-Code wie folgt und legen Sie nur eine Flex-Grow-Eigenschaft fest.

flex-grow.css

.container {
    display: flex;
}
.frameA {
    border: 1px solid #e9006b;
    flex-grow: 1;
}
.frameB {
    border: 1px solid #ff6a00;
}
.frameC {
    border: 1px solid #d0b106;
}

.frameD {
    border: 1px solid #4aae20;
}
.frameE {
    border: 1px solid #01b9b3;
}

Verwenden Sie einen Webbrowser, um die Seite anzuzeigen. Wenn die Fensterbreite schmaler ist, ist die angezeigte Rahmenbreite dieselbe wie im vorherigen Fall.

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Erhöhen Sie die Fensterbreite des Webbrowsers. In dem Zustand, in dem während der Anzeige ein Zeilenumbruch erforderlich ist, ist die Breite jedes Rahmens gleich.

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Fenstergröße weiter vergrößern. Zeigt die Breite des Textes ohne Umbruch in der Mitte an.

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Erweitern Sie die Fensterbreite weiter. Die Breite von Rahmen A mit der Eigenschaft „Flex-Grow“ wird weiter erhöht, die Breite anderer Rahmen ohne die Eigenschaft „Flex-Grow“ bleibt jedoch gleich.

Detaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code)

Auch wenn die Fensterbreite weiter verbreitert wird, hat nur FrameA eine größere Breite.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Flex-Grow-Attributs in CSS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html flex

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie die Eigenschaft „flex-basis“, um die Breite des Flexbox-Rahmens festzulegenNächster Artikel：Verwenden Sie die Eigenschaft „flex-basis“, um die Breite des Flexbox-Rahmens festzulegen

In Verbindung stehende Artikel

Mehr sehen