Heim > Artikel > Web-Frontend > Was sind die CSS3-Layouteigenschaften?

Was sind die CSS3-Layouteigenschaften?

青灯夜游Original: 2022-02-25 18:12:542146Durchsuche

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>

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

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

css css3 count column flex

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind die neuen Formularattribute in HTML5?Nächster Artikel：Was sind die neuen Formularattribute in HTML5?

In Verbindung stehende Artikel

Mehr sehen