Heim >Web-Frontend >CSS-Tutorial >CSS – Anzeige: Flex vs. Inline-Flex
CSS – Anzeige: Flex vs. Inline-Flex
- DDDOriginal
- 2024-11-30 15:12:10629Durchsuche
Inline-Flex
Ein untergeordneter Container mit display: inline-flex füllt den übergeordneten Container nicht automatisch. Seine Größe hängt vom Inhalt und allen darauf angewendeten zusätzlichen Stilen ab.
biegen
Ein untergeordneter Container mit display:flex füllt automatisch die Breite des übergeordneten Containers aus, da sich flex wie ein Element auf Blockebene verhält, das standardmäßig erweitert wird, um der verfügbaren Breite des übergeordneten Containers zu entsprechen.
Beispiel
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<h1>inline-flex</h1>
<div>
<p>CSS<br>
</p>
<pre class="brush:php;toolbar:false">body {
background: transparent;
color: #fcbe24;
padding: 0 24px;
margin: 0;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
background-color: white;
color: black;
}
.inline-flex-c {
display: inline-flex;
background-color: palevioletred;
}
.flex-c {
display: flex;
background-color: chocolate;
}
.child{
border-color: greenyellow;
border-style: solid;
}
Ergebnis
Der Flex-Container dehnt sich aus, um die gesamte Breite seines übergeordneten Containers einzunehmen. Im Gegensatz dazu nimmt der inline-flex-Container nur die Breite ein, die für seinen Inhalt erforderlich ist.
Das obige ist der detaillierte Inhalt vonCSS – Anzeige: Flex vs. Inline-Flex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!