Das Flex-Layout realisiert den Layoutmodus mit festem oberen und unteren und gleitendem mittleren

In diesem Artikel wird hauptsächlich die Layoutmethode des Flex-Layouts vorgestellt, mit der das obere und untere feste sowie das mittlere verschiebbare Layout erreicht werden. Diese wird wie folgt mit Ihnen geteilt:

Auf einer Seite wie dieser möchten Sie beispielsweise ein Kopfbild, eine untere Leiste und einen verschiebbaren Inhaltsbereich in der Mitte haben.

Stellen Sie kurz vor, wie Sie dies erreichen können

Feste Kopf- und Fußzeile, verschiebbare Mitte, mit Flex-Layout
1. HTML und Texthöhe auf 100 % setzen
2. Stellen Sie das Layout des äußersten Div auf flexibles Layout display:flex; ein.
3. Stellen Sie die Hauptachsenrichtung des äußersten Div auf Flex-Richtung: Spalte ein. Die Hauptachse ist vertikal und der Startpunkt befindet sich an der oberen Kante
Zeile (Standard): Die Hauptachse ist horizontal, mit dem Startpunkt am linken Ende.
Zeilenumbruch: Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende.
Säule: Die Hauptachse ist vertikal, der Startpunkt befindet sich an der oberen Kante.
column-reverse: Die Hauptachse ist vertikal und der Startpunkt liegt an der Unterkante.
4. Stellen Sie die Höhe des äußersten Div auf 100% ein
5. Schreiben Sie den Header-Stil normal
6. Schreiben Sie den Schwanzstil normal
7. Der mittlere Stil ist flex: 1; overflow: hidden oder overflow: auto; -webkit-overflow-scrolling: touch. Letzterer wird beim Gleiten auf iOS-Telefonen Probleme haben. Es wird empfohlen, ein Plug-In zu verwenden.

HTML-Teil:

<div Klasse="Hauptwarp">
    <div Klasse="Header">
      <img src="imgurl" class="header-img" alt>
    </div>
    <div Klasse="Inhalt">
      <div Klasse="Inhalt-Scroll">
        <div Klasse="Shop-Box">
          <img src="imgurl" alt>
        </div>
        <div Klasse="Shop-Box">
          <img src="imgurl" alt >
        </div>
        <div Klasse="Shop-Box">
          <img src="imgurl" alt >
        </div>
        <div Klasse="Shop-Box">
          <img src="imgurl" alt >
        </div>
      </div>
    </div>
    <div Klasse="Fußzeile"></div>
  </div>

js-Teil:

<Skript>
BScroll von „better-scroll“ importieren
Standard exportieren {
  Daten () {
    zurückkehren {
      
    }
  },
 
  Komponenten:
  },
  Methoden: {
 
  },
 
  berechnet: {
 
  },
 
  montiert () {
    dies.$nextTick(Funktion () {
      /* eslint-deaktivieren Sie no-new */
      let pageBottom = document.querySelector('.content')
      neues BScroll(Seitenende, { Klick: true })
    })
  },
  erstellt () {
  }
}
</Skript>

Stilteil:

<style lang="weniger" rel="stylesheet/weniger" type="text/weniger">
@r: 100;
// Kopf- und Fußzeile korrigiert, der Mittelteil ist verschiebbar, mit Flex-Layout // html,
Körper {
  Hintergrund: URL("//storage.jd.com/1901/04nianhuojie/02lingquanbg_02.png")
    wiederhole-y;
  Hintergrundgröße: 100 %;
  Höhe: 100%;
}
.Hauptwarp {
  maximale Breite: 750px;
  Mindesthöhe: 100 %;
  Rand: 0 automatisch;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Höhe: 100%;
  Breite: 100 %;
  Box-Größe: Rahmenbox;
  .header {
    Höhe: 500rem / @r;
    .header-img {
      Höhe: 500rem / @r;
    }
  }
  .Inhalt {
    biegen: 1;
    Breite: 100 %;
    Überlauf: versteckt;
    // Überlauf: automatisch;
    // -webkit-overflow-scrolling: berühren;
    .shop-box {
      Rand: 50rem / @r 0;
      img {
        Breite: 106rem / @r;
      }
    }
  }
  .Fußzeile {
    Hintergrund: URL("//storage.jd.com/1901/04nianhuojie/fixbtnbg_02.png") wiederholen;
    Hintergrundgröße: 12rem / @r 11rem / @r;
    Höhe: 82rem / @r;
    Breite: 100 %;
    unten: 0;
    Farbe: #ffdeb8;
    Schriftgröße: 34rem / @r;
    Zeilenhöhe: 82rem / @r;
    Textausrichtung: zentriert;
    Schriftstärke: fett;
    maximale Breite: 750px;
  }
}
 
</Stil>

Zur Erklärung: Wenn Sie auf dem mobilen Endgerät

Überlauf: automatisch;

-webkit-overflow-scrolling: berühren;

Wenn der Finger unter iOS über den Bereich des Felds hinaus gleitet, kann es leicht dazu führen, dass der Bereich beim erneuten Gleiten nicht gleitet, als ob der Finger das Feld nicht berührt hätte. Daher wird hier das BScroll-Plug-In verwendet, und dasselbe gilt für die Verwendung von IScroll.

Der endgültige Effekt besteht darin, den direkten untergeordneten Inhaltselementen einen Übergangseffekt hinzuzufügen.

Dieses Layout hier eintragen

Hinweis: Diese Layoutmethode ist nicht mit iOS 9.3 und niedriger kompatibel. Flex-Layout sollte mit Vorsicht verwendet werden, wenn es mit niedrigeren iOS-Versionen kompatibel sein muss.

Damit ist dieser Artikel darüber, wie Flex Layout ein Layout mit fester Ober- und Unterseite und Gleiten in der Mitte erreicht, abgeschlossen. Weitere relevante Flex Layout-Inhalte mit fester Ober- und Unterseite und Gleiten in der Mitte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!