Heim >Web-Frontend >CSS-Tutorial >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:274175Durchsuche
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.
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.
Zeigt die gleiche Breite an, wenn der Text im Feld eine unerwünschte Breite aufweist.
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.
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.
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.
Fenstergröße weiter vergrößern. Zeigt die Breite des Textes ohne Umbruch in der Mitte an.
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.
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!