Instanz
hinterlässt Leerraum um Elemente im
-Element eines Flexbox-Objekts:
p
{
anzeige:flex;
begründen -Inhalt:Raum-rund;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
width: 400px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
#main div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
</div>
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>
</body>
</html>Effektvorschau
Browser-Unterstützung
Die Zahl in der Tabelle gibt die Versionsnummer des ersten Browsers an, der dieses Attribut unterstützt.
Die Nummer unmittelbar nach -webkit-, -ms- oder -moz- ist die erste Version, die dieses Präfixattribut unterstützt.
| justify-content | 29.0
|
11.0 | 28.018.0 -moz- | 17.0 |
Definition und Verwendung
justify-content wird verwendet, um die Ausrichtung des Flex-Box-Elements in Richtung der Hauptachse (horizontale Achse) festzulegen oder abzurufen.
Tipp: Verwenden Sie die Eigenschaft align-content, um Elemente auf der Querachse (vertikal) auszurichten.
| 默认值： | flex-start |
|---|---|
| 继承： | 否 |
| 可动画化： | 否。请参阅 CSS3动画属性、CSS3动画实例。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.justifyContent="space-between" 效果预览 |
CSS-Sprache
justify-content: flex-start|flex-end|center|space-between|space-around |initial|inherit;
Attributwert
| Wert | Beschreibung | Test |
|---|---|---|
| Flex-Start | Standardwert. Der Artikel befindet sich am Anfang des Containers. | Effektvorschau |
| Flex-Ende Der Artikel | befindet sich am Ende des Containers. | Effektvorschau |
| Mitte | Artikel befindet sich in der Mitte des Behälters. | Effektvorschau |
| Leerzeichen dazwischen | Elemente befinden sich in einem Container mit Leerraum zwischen den Zeilen. | Effektvorschau |
| Raum-um | Elemente werden in Containern mit Leerzeichen vor, zwischen und nach jeder Zeile platziert. | Effektvorschau |
| anfänglich | Setzen Sie diese Eigenschaft auf ihren Standardwert. Siehe Initiale. | Effektvorschau |
| erben | Erbt diese Eigenschaft vom übergeordneten Element. Siehe erben. |
Weitere Artikel zum CSS-Attribut „justify-content“ des flexiblen flexiblen Boxmodells Bitte achten Sie auf die chinesische PHP-Website!
Lassen Sie einen schicken, aber unkomplizierten Seitenloader machenApr 15, 2025 am 09:33 AMEs ist heutzutage ziemlich häufig, einen Ladezustand auf Websites zu sehen, insbesondere wenn progressive Web -Apps und reaktive Websites zunehmen. Es ist ein Weg zu
Die Landschaft der plattformübergreifenden App-EntwicklungApr 15, 2025 am 09:29 AMIch verfolge dieses Zeug nicht sehr gut, aber ich verstehe es. Wenn Sie eine native App für Android und iOS wünschen, wäre es sicher schön, sie nur einmal schreiben zu müssen
Das Teletyp -Textelement lebt weiter ... zumindest auf dieser SeiteApr 15, 2025 am 09:28 AMEs war das:
Verwenden von Fusebox als Bündelung Alternative zu Webpack für ReactApr 15, 2025 am 09:26 AMWenn Sie nach einem alternativen Bundler zu WebPack suchen, sollten Sie sich die Fusebox ansehen. Es baut auf dem auf, was WebPack bietet-Code-Splitting, heiß
Was ich an Schreibstilen mit Svelte magApr 15, 2025 am 09:25 AMIn letzter Zeit gab es in letzter Zeit viele wohlverdienten Hype um Svelte, wobei das Projekt über 24.000 Github-Sterne sammelte. Wohl das einfachste JavaScript
Wöchentliche Plattformnachrichten: CSS Column-Span-Eigenschaft, ADA, gilt für Websites, automatisch generierte BildbeschreibungenApr 15, 2025 am 09:23 AMIn der Roundup: Multi-Säulen-Layouts in dieser Woche erhalten die ADA mehr A11Y für Einzelhändler, und Google unternimmt etwas gegen das gesamte leere Bild
Der aktuelle Status des Stylings wählt 2019 ausApr 15, 2025 am 09:18 AMDas Beste, was ich vom letzten Mal erkennen konnte, als ich die gewünschten Funktionen von CSS zusammenstellte, war eine wichtige Frage. Top 5, i ' D sagen. Und vom Eingeborenen
Werden Sie 2020 ein Front-End-Meister mit diesen 10 ProjektideenApr 15, 2025 am 09:17 AMDies ist ein kleiner aktualisierter Cross-Post aus einem Quickie-Artikel, den ich über Dev geschrieben habe. Ich veröffentlichen hier '
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Dreamweaver CS6
Visuelle Webentwicklungstools
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
