CSS-Rasterfunktionen, die Sie vielleicht noch nicht kennen!

In diesem Artikel werden Ihnen die Rasterfunktionen in CSS vorgestellt: fit-content(), minmax(), repeat(). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. Diese drei Funktionen können nur im Rasterlayout verwendet werden Werte, können ihre Funktion wörtlich erklären: „Anpassung an den Inhalt“.

<div class="fit-content-wrapper">
  <div class="fit-item item1">test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss ssssssssssssssssssss 这是用了fit-content(400px)</div>
  <div class="fit-item item2">test2 这是固定宽度width：400px</div>
  <div class="fit-item item3">test3 这是fit-content(400px)</div>
</div>

  .fit-content-wrapper{
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: fit-content(400px) 400px fit-content(400px);
    grid-gap: 10px;
  }
  .fit-item{
    background-color: rgb(20, 106, 177);
  }

Effekt

Sie können sehen:

Wenn die Inhaltslänge größer als die angegebene Länge ist, wird der Text automatisch umgebrochen und überschreitet die angegebene Länge nicht folgt dem angegebenen Inhalt. Länge legt die Länge fest.

Kompatibilität

Mit modernen Browsern gibt es kein Problem. Die neue Version der Mainstream-Browser kann dies grundsätzlich unterstützen, kann jedoch nicht für Projekte verwendet werden, die IE unterstützen müssen.

minmax()

minmax-Funktion stellt einen geschlossenen Intervallbereich [min,max] dar. Wenn der Wert kleiner oder gleich min ist, ist der Wert gleich min. Der Wert ist gleich max.

min-content. Die Funktion max-content

minmax empfängt die Parameter min-content und max-content. Diese beiden Parameter stellen die kürzeste und längste Inhaltslänge des Inhalts dar. Siehe den Fall unten.

    <div class="minmax-wrapper">
      <div class="minmax-item">
        test1dsssss3333333 sssssssssssssss sssssssssssssssssss
        sssssssssssssssssss ssssssssssssssssssss
      </div>
      <div class="minmax-item">
        <p>test2222222222</p>
        <p>test 232232323233</p>
        <p>min-content采用最短的内容长度</p>
      </div>
      <div class="minmax-item">
        <p>test</p>
        <p>test 232232323233222222</p>
        <p>max-content采用最长的内容长度</p>
      </div>
    </div>

      .minmax-wrapper {
        margin-top: 100px;
        width: 100vw;
        display: grid;
        grid-gap: 10px;
        grid-template-columns:
          minmax(300px, 500px) minmax(50px, min-content)
          minmax(100px, max-content);
      }

Effekt

Sie können sehen, dass die minimale Inhaltsbreite des zweiten Elements das erste p-Tag im zweiten Element ist

Bei Einstellung auf minmax (50px, min. Inhalt) Wenn , das Maximum Die Spaltenbreite darf die Inhaltsbreite des ersten p-Tags nicht überschreiten.

Die maximale Inhaltsbreite des dritten Elements ist die Inhaltsbreite des dritten P-Tags

Bei Einstellung auf Minmax (100 Pixel, maximaler Inhalt) überschreitet die maximale Inhaltsbreite nicht die Breite des dritten P-Tags

Kompatibilität

ist dasselbe wie die Fit-Content-Funktion. Es unterstützt keinen IE, bietet aber gute Unterstützung für gängige moderne Browser.

repeat()

repeat-Funktion wird zum stapelweisen Verarbeiten von Rastern verwendet und empfängt 2 Parameter. Der erste Parameter stellt die Anzahl der Ausführungen dar und der zweite Parameter stellt die Länge dar. Siehe das Beispiel unten

Zusätzlich zur Angabe der spezifischen Häufigkeit erhält „repeat“ auch die Parameter „Auto-Fill“ und „Auto-Fit“. Lassen Sie uns über die Konzepte dieser beiden Parameter sprechen.

Auto-Fill

Auto-Fill bedeutet, dass der Browser basierend auf dem Element automatisch die Anzahl der Male ausfüllt. Wenn der Container sehr breit ist, wird die Breite des verbleibenden Gitters automatisch reserviert. Wenn der Gittercontainer eine bestimmte Größe oder eine maximale Größe auf der relevanten Achse hat, ist die Anzahl der Wiederholungen die größtmögliche positive ganze Zahl, die nicht dazu führt, dass das Gitter seinen Gittercontainer überläuft.

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
    </div>

      .repeat-wrapper {
        margin-top: 100px;
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-gap: 10px;
      }

Effekt

Auto-Fit

Auto-Fit wird ebenfalls automatisch berechnet, aber im Gegensatz zum automatischen Ausfüllen behält das automatische Anpassen die verbleibenden leeren Zellen nicht bei und füllt die verbleibenden leeren Zellen automatisch aus Zellen werden auf jede Zelle umverteilt. Siehe das Beispiel unten

    <div class="repeat-wrapper">
      <div class="repeat-item">test1 3</div>
      <div class="repeat-item">test2 23</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 4444</div>
      <div class="repeat-item">test3 444</div>
      <div class="repeat-item">test3 444</div>
    </div>

grid-template-columns: repeat(auto-fill, minmax(100px,1fr));

Effekt

Kompatibilität

Die neuesten Versionen der Mainstream-Browser werden grundsätzlich unterstützt, IE wird jedoch immer noch nicht unterstützt.

Zusammenfassung

Diese drei Rasterfunktionen sind äußerst umfangreich im Rasterlayout. Ich habe das Rasterlayout vorher nicht oft verwendet, aber nachdem ich heute diese drei Funktionen und einige verwandte Parameter kennengelernt habe, ist es auch sehr praktisch um andere Layouts zu vergleichen. Sie können es später in einigen Ihrer eigenen kleinen Projekte verwenden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonCSS-Rasterfunktionen, die Sie vielleicht noch nicht kennen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!