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!
Verständnis von usestate (): Ein umfassender Leitfaden für React State ManagementApr 25, 2025 am 12:21 AMUsSestate () isareAatthookusedTomanagestateInfunktionalkomponenten.1) ItinitializesAndupDatesTate, 2) sollte beschließt, dass die Komponenten, 3) canleadto'Stalestate'ifnotusedCorcty und 4) aufführungsgeoprisiteusecallbackbackbackbackbackbackbackbackback- und -Propsedates-Propastatupdates.
Was sind die Vorteile der Verwendung von React?Apr 25, 2025 am 12:16 AMReactispopulardUetoitsComponent-basierte Architektur, Virtualdom, Richecosystem und Declarativenature.1) Komponentenbasierte ArchitektureAllowsforsableuipieces, Verbesserung der Modularität und Mainainity.2) TheVirtualDomesHancesByupdoiclyupdatingTheUi.
Debugging in React: Identifizierung und Lösung von gemeinsamen ProblemenApr 25, 2025 am 12:09 AMTodebugractApplicationseffectivy, Useethesstrategien: 1) adrescropdrillingwithContextapiorDux.2) HandleasynchronousoperationswithusSestateAndusefect unter Verwendung von ABLORTCONTORTOPREVREPRAPRACECONDITIONS.3) OptimizeperformancewithuSemoemaNtopercallbacktoAid
Was ist Usestate () in React?Apr 25, 2025 am 12:08 AMUsSestate () InreactAllowStatemanagementInfunktionalkomponenten.1) ItsImplifiessTatemanagement, MAKECODEMORECONCISE.2) UsethePrevCountfunctionToupDatEtatEtateBasedonitSecallbackbackbackbackbackbonbackbackbonbonbonbonbonbonbonporesancePorporanceOptimizatio
Usestate () gegen Usereducer (): Auswahl des richtigen Hakens für Ihre ZustandsbedürfnisseApr 24, 2025 pm 05:13 PMEntsSimple, IndependentStateVariables; nutzungsgefertiger () forcomplexStatelogicorwhenstatePendsonPreviousState.1) UsSestate () ISIdeAlforSimpleUpUpdateSliketoggingaboolanorupdatingacounter.2) Usereducer () isBetterFoperePerformAntoRaChers () IsBetterformAntoTterForm
Verwalten von Staat mit usestate (): Ein praktisches TutorialApr 24, 2025 pm 05:05 PMUsestate ist den Klassenkomponenten und anderen Lösungen für das staatliche Management überlegen, da es das Staatsmanagement vereinfacht, den Code klarer und lesbarer macht und mit Reacts deklarativer Natur übereinstimmt. 1) Usestate ermöglicht es, dass die Zustandsvariable direkt in der Funktionskomponente deklariert wird.
Wann ist Usestate () zu verwenden und alternative staatliche Managementlösungen in Betracht zu ziehenApr 24, 2025 pm 04:49 PMUsesEsestate () ForlocalComponentStatemanagement; prüfenAlternativesforglobalState, ComplexLogic, OrperformanceIssues.1) UsSestate () ISIdeAlForSimple, LocalState.2) UseGlobalStatesSolutionsSlikereduxContextForSharedState.3) optforreDuxtOmokitOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOrtOmokitOmortOmoktorstate
Die wiederverwendbaren Komponenten von React: Verbesserung der Wartbarkeit und Effizienz der Code verbessernApr 24, 2025 pm 04:45 PMReusableComponentsinreactenhancecodemaintainabilityandefficience -By -AchouclowingdevelousSameSameComponentacrossDifferentPartSofanApplicationOrProjects
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
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
