Quelles sont les propriétés de mise en page CSS3 ?-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-02-25 18:29:27

original

2179 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

.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;
      }
  }

Copier après la connexion

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) {
   
  }

Copier après la connexion

(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!