Maison > Article > interface Web > Quelles sont les propriétés de mise en page CSS3 ?
Les attributs de mise en page
css3 incluent : flex-direction, flex-wrap, flex-flow, justification-content, align-items, align-content, order, flex-grow, flex-shrink, etc.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.
1. Modèle de boîte flexible (Flexible Box ou Flexbox)
La plus grande caractéristique du modèle flexbox est qu'il peut modifier dynamiquement la largeur et la hauteur des sous-éléments pour répondre à la disposition appropriée sur des écrans de différentes tailles. .
(1) Propriétés du conteneur flexible
flex-direction : définit la direction de l'axe principal et détermine la disposition des sous-éléments flexibles
flex-wrap : s'il faut envelopper lorsque les sous-éléments flexibles dépassent la portée du conteneur flexible
flex-flow: flex - Raccourci pour les propriétés de direction et de flex-wrap, propriétés composées
justify-content: Alignement sur l'axe principal
align-items: Alignement sur l'axe transversal
align-content: Lorsqu'il y a de l'espace sur l'axe transversal, alignement de l'axe latéral
(2) Attributs flexibles des sous-éléments
order : contrôlez l'ordre des sous-éléments dans le conteneur flexible
flex-grow : définissez le taux d'expansion des sous-éléments flex
flex-shrink : définit le taux de rétrécissement du sous-élément élastique,
flex-basis : spécifie la valeur de taille par défaut du sous-élément élastique avant l'étirement, équivalente aux attributs de largeur et de hauteur
flex : L'attribut composite des attributs flex-grow, flex-shrink et flex-basis
align-self : Autoriser les sous-éléments flexibles indépendants à remplacer les paramètres d'alignement par défaut du conteneur flexible
Élément de menu Flexbox combat réel
<!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. Explication détaillée multi-colonnes
colonnes : attributs composites (largeur de colonne et nombre de colonnes), définissez la largeur et le nombre de colonnes ; de chaque colonne
column-count : définissez le nombre de colonnes
column-gap : définissez l'écart entre les colonnes
column-rule : propriétés composées (colonne-rule-width, column-rule-style, column-rule- color), définissez le style de bordure entre les colonnes
column-fill : définissez si la hauteur de la colonne est uniforme
column-span : définissez si elle s'étend sur toutes les colonnes
3. Requête multimédia
/*超小屏幕(手机,小于768px)*/ /*没有任何媒体查询相关的代码,移动设备优先*/ /*小屏幕(平板,大小等于768)*/ @media (min-width: 768px) { } /*中等屏幕(桌面显示器,大于等于992px)*/ @media (min-width: 992px) { } /*大屏幕(大桌面显示器,大于等于1200px)*/ @media (min-width: 1200px) { }
(Apprentissage partage de vidéos :
tutoriel vidéo CSS, tutoriel d'introduction au front-end Web)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!