Was sind die CSS3-Layouteigenschaften?
Zu den CSS3-Layoutattributen gehören: Flex-Richtung, Flex-Wrap, Flex-Flow, Justify-Content, Align-Items, Align-Content, Order, Flex-Grow, Flex-Shrink usw.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.
1. Flexibles Box-Modell (Flexible Box oder Flexbox) Das größte Merkmal des Flexbox-Modells besteht darin, dass es die Breite und Höhe von Unterelementen dynamisch ändern kann, um das entsprechende Layout auf Bildschirmen unterschiedlicher Größe zu erfüllen .
(1) Flexible ContainereigenschaftenFlex-Richtung: Legen Sie die Hauptachsenrichtung fest und bestimmen Sie die Anordnung der flexiblen Unterelemente.
Flex-Wrap: Ob umgebrochen werden soll, wenn die flexiblen Unterelemente den Umfang des überschreiten flexibler Container
flex-flow: flex – Abkürzung für Richtungs- und Flex-Wrap-Eigenschaften, zusammengesetzte Eigenschaften
justify-content: Ausrichtung auf der Hauptachse
align-items: Ausrichtung auf der Querachse
align-content: Wenn auf der Querachse Platz ist, seitliche Achsenausrichtung
(2) Flexible Unterelementattributeorder: Steuern Sie die Reihenfolge der Unterelemente im Flex-Container
flex-grow: Legen Sie das Erweiterungsverhältnis fest der flexiblen Unterelemente
flex-shrink: Legen Sie das Schrumpfverhältnis des elastischen Unterelements fest.
flex-basis: Gibt den Standardgrößenwert des elastischen Unterelements vor dem Dehnen an, äquivalent zu den Breiten- und Höhenattributen
flex : Das zusammengesetzte Attribut der Attribute „Flex-Grow“, „Flex-Shrink“ und „Flex-Basis“
align-self : Erlaubt unabhängigen flexiblen Unterelementen, die Standardausrichtungseinstellungen des flexiblen Containers zu überschreiben
Flexbox-Menüpunkt „Echtkampf“ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
响应式菜单html架构，emmet的方式进行简写
ul.menu>li*6>a[href="#"]{HTML}
-->
<ul class="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Mongo</a></li>
</ul>
</body>
</html>.menu{
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
}
.menu li{
height: 40px;
text-align: center;
line-height: 40px;
flex: 1 1 100%;
}
.menu li:nth-child(1){
background-color: #39ADD1;
}
.menu li:nth-child(2){
background-color: #3079AB;
}
.menu li:nth-child(3){
background-color: #982551;
}
.menu li:nth-child(4){
background-color: #E15258;
}
.menu li:nth-child(5){
background-color: #CC6699;
}
.menu li:nth-child(6){
background-color: #52AC43;
}
@media (min-width:480px) {
.menu li{
flex: 1 1 50%;
}
}
@media (min-width:768px) {
.menu{
flex-flow: row nowrap;
}
}
2. Detaillierte Erklärung für mehrere SpaltenAttributliste:
Spalten: Zusammengesetzte Attribute (Spaltenbreite und Spaltenanzahl), legen Sie die Breite und Anzahl der Spalten fest;
Spaltenbreite: Legen Sie die Breite fest jeder Spalte
column-count: Legen Sie die Anzahl der Spalten fest
column-gap: Legen Sie den Abstand zwischen den Spalten fest
column-rule: Zusammengesetzte Eigenschaften (Spaltenregelbreite, Spaltenregelstil, Spaltenregelstil) Farbe), legen Sie den Rahmenstil zwischen den Spalten fest
column-fill: Legen Sie fest, ob die Spaltenhöhe einheitlich ist
column-span: Legen Sie fest, ob sie sich über alle Spalten erstreckt
3. Best Practice:
/*超小屏幕（手机，小于768px)*/
/*没有任何媒体查询相关的代码，移动设备优先*/
/*小屏幕（平板，大小等于768）*/
@media (min-width: 768px) {
}
/*中等屏幕（桌面显示器，大于等于992px)*/
@media (min-width: 992px) {
}
/*大屏幕（大桌面显示器，大于等于1200px)*/
@media (min-width: 1200px) {
}(Learning Video-Sharing:
CSS-Video-Tutorial,
Web-Frontend-Einführungs-TutorialDas obige ist der detaillierte Inhalt vonWas sind die CSS3-Layouteigenschaften?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3
Apr 25, 2022 pm 04:52 PM
Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen. Die Syntax „img:active {transform : Skala(x-Achsen-Vergrößerung, y-Achsen-Vergrößerung);}".
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
So legen Sie die Rotationsgeschwindigkeit der Animation in CSS3 fest
Apr 28, 2022 pm 04:32 PM
In CSS3 können Sie das Attribut „animation-timing-function“ verwenden, um die Rotationsgeschwindigkeit der Animation festzulegen. Dieses Attribut wird verwendet, um anzugeben, wie die Animation einen Zyklus abschließt und die Geschwindigkeitskurve der Animation festlegt. Animation-Timing-Funktion: Geschwindigkeitsattributwert;}".
Tipps zur Optimierung von CSS-Layouteigenschaften: Position Sticky und Flexbox
Oct 20, 2023 pm 03:15 PM
Tipps zur Optimierung von CSS-Layoutattributen: Positionsticky und Flexbox In der Webentwicklung ist das Layout ein sehr wichtiger Aspekt. Eine gute Layoutstruktur kann das Benutzererlebnis verbessern und die Seite schöner und einfacher zu navigieren machen. CSS-Layouteigenschaften sind der Schlüssel zum Erreichen dieses Ziels. In diesem Artikel werde ich zwei häufig verwendete Techniken zur Optimierung von CSS-Layouteigenschaften vorstellen: Positionsticky und Flexbox, und spezifische Codebeispiele bereitstellen. 1. Positionen
