css3 layout attributes include: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, flex-grow, flex-shrink, etc.
The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.
1. Flexible Box Model (Flexible Box or Flexbox)
The biggest feature of the flexible box model is that it can dynamically modify the width of sub-elements and height to meet the appropriate layout on different screen sizes.
(1) Flexible container properties
flex-direction: Set the main axis direction and determine the arrangement of elastic sub-elements
flex-wrap: When elastic Whether the child element wraps when it exceeds the scope of the flexible container
flex-flow: shortcut for flex-direction and flex-wrap properties, compound property
justify-content: alignment on the main axis
align-items: Alignment on the cross axis
align-content: Alignment on the cross axis when there is space on the cross axis
(2) Elastic sub Element attributes
order: Control the order of sub-elements in the flexible container
flex-grow: Set the expansion ratio of elastic sub-elements
flex-shrink: Set the elastic sub-elements The shrinkage ratio of the element,
flex-basis: Specifies the default size value of the elastic sub-element before stretching, equivalent to the width and height attributes
flex: flex-grow, flex-shrink and flex- Composite attribute of the basis attribute
align-self: allows independent elastic child elements to override the default alignment setting of the elastic container
Flexbox menu item actual combat
<!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. Detailed explanation of multiple columns
Attribute list:
columns: compound attributes (column-width and column-count), set the width and Number of columns;
column-width: Set the width of each column
column-count: Set the number of columns
column-gap: Set the gap between columns
column-rule: Composite attributes (column-rule-width, column-rule-style, column-rule-color), set the border style between columns
column-fill: Set the height of the column Whether to unify
column-span: Set whether to span all columns
3, media query
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 front-end introductory tutorial)
The above is the detailed content of What are the css3 layout properties?. For more information, please follow other related articles on the PHP Chinese website!
CSS: Can I use multiple IDs in the same DOM?May 14, 2025 am 12:20 AMNo,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure
The Aims of HTML5: Creating a More Powerful and Accessible WebMay 14, 2025 am 12:18 AMHTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl
Significant Goals of HTML5: Enhancing Web Development and User ExperienceMay 14, 2025 am 12:18 AMHTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur
HTML5: Is it secure?May 14, 2025 am 12:15 AMHTML5isnotinherentlyinsecure,butitsfeaturescanleadtosecurityrisksifmisusedorimproperlyimplemented.1)Usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieslikeclickjacking.2)AvoidstoringsensitivedatainWebStorageduetoitsaccess
HTML5 goals in comparison with older HTML versionsMay 14, 2025 am 12:14 AMHTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand
CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AMUsing ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.
HTML5: Goals in 2024May 13, 2025 am 12:13 AMHTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur
What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AMHTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
