Maison > Article > interface Web > Quelles sont les propriétés de mise en page CSS3 ?

Quelles sont les propriétés de mise en page CSS3 ?

青灯夜游original: 2022-02-25 18:12:542099parcourir

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

Liste d'attributs :

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

Meilleure pratique :

/*超小屏幕（手机，小于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!

css css3 count column flex

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quels sont les nouveaux attributs de formulaire en HTML5Article suivant：Quels sont les nouveaux attributs de formulaire en HTML5

Articles Liés

Voir plus