Was sind die CSS3-Layouteigenschaften?-Front-End-Fragen und Antworten-php.cn

Was sind die CSS3-Layouteigenschaften?

青灯夜游

Freigeben： 2022-02-25 18:29:27

Original

2159 Leute haben es durchsucht

Zu den CSS3-Layoutattributen gehören: Flex-Richtung, Flex-Wrap, Flex-Flow, Justify-Content, Align-Items, Align-Content, Order, Flex-Grow, Flex-Shrink usw.

Was sind die CSS3-Layouteigenschaften? 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 Containereigenschaften

Flex-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 Unterelementattribute

order: 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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

(Learning Video-Sharing:

CSS-Video-Tutorial

Web-Frontend-Einführungs-Tutorial

)

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