Key Takeaways

• Das Tutorial zeigt, wie ein grundlegendes Layout einer Trello-Platine mit CSS Grid und Flexbox implementiert wird und eine reaktionsschnelle CSS-L?sung bietet. Das Layout besteht aus einer App -Leiste, einer Boardleiste und einem Abschnitt mit Kartenlisten.
• In dem Tutorial wird erl?utert, wie ein 3 × 1 -Raster verwendet wird, um die Layoutstruktur zu erstellen, wobei die ersten beiden Reihen feste H?hen und die dritte Reihe über den Rest der verfügbaren Ansichtsfensterh?he überspannen. Es verwendet auch Ansichtsfenster, um sicherzustellen, dass der Container immer so gro? ist wie das Ansichtsfenster des Browsers.
• Das Tutorial zeigt, wie ein Einzelzeilen-Zeilencontainer mit Ansichtsfenster verwendet wird, um die Kartenlisten zu formatieren. Es zeigt auch, wie Sie die überlauf-X-Eigenschaft verwenden, um eine horizontale Bildlaufleiste am unteren Bildschirmrand anzuzeigen, wenn die Listen nicht in die Breite des Ansichtsfensters passen.
• Das Tutorial legt nahe, dass die maximale Einschr?nkung auf die innere, ungeordnete Liste angewendet wird, um die H?he einer Liste zu verwalten. Es wird auch erl?utert, wie die Liste so gro? wie der übergeordnete Container und die Verwendung der überlaufeigenschaft, um die Karten-Scrollbar nur bei Bedarf anzuzeigen.

In diesem Tutorial werde ich Sie durch eine Implementierung des grundlegenden Layouts eines Trello -Board -Bildschirms führen (siehe Beispiel hier). Dies ist eine reaktionsschnelle CSS-L?sung, und nur die strukturellen Merkmale des Layouts werden entwickelt.

Für eine Vorschau ist hier eine Codepen -Demo des Endergebnisses.

Neben dem Gitterlayout und Flexbox verwendet die L?sung Berechnungs- und Ansichtsfenstereinheiten. Um den Code lesbarer und effizienter zu gestalten, nutze ich auch SASS -Variablen.

Es werden keine Fallbacks bereitgestellt. Stellen Sie also sicher, dass der Code in einem unterstützenden Browser ausgeführt wird. Lassen Sie uns ohne weiteres eintauchen und die Bildschirmkomponenten nacheinander entwickeln.

Das Bildschirmlayout

Der Bildschirm eines Trello -Boards besteht aus einer App -Leiste, einer Board -Leiste und einem Abschnitt mit den Kartenlisten. Ich baue diese Struktur mit dem folgenden Markup -Skelett:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Dieses Layout wird mit einem CSS -Netz erreicht. Insbesondere ein 3 × 1 -Gitter (dh eine S?ule und drei Zeilen). Die erste Zeile ist für die App -Leiste, die zweite für die Boardleiste und die dritte für das .lists -Element.

Die ersten beiden Zeilen haben jeweils eine feste H?he, w?hrend die dritte Reihe den Rest der verfügbaren Ansichtsfensterh?he umfasst:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Ansichtsfenster stellen sicher, dass der .Ui -Container immer so gro? ist wie das Ansichtsfenster des Browsers.

Dem Container wird

Ein Gitterformat -Kontext zugeordnet, und die oben angegebenen Rasterreihen und Spalten sind definiert. Um genauer zu sein, werden nur die Zeilen definiert, da die eindeutige Spalte nicht deklariert werden muss. Die Gr??e der Zeilen erfolgt mit ein paar SASS -Variablen für die H?he der Balken und der FR -Einheit, damit die H?he des .listen -Elements den Rest der verfügbaren Ansichtsfensterh?he erstrecken.

Die Karte listet Abschnitt

auf

Wie bereits erw?hnt, veranstaltet die dritte Zeile des Bildschirmgitters den Container für die Kartenlisten. Hier ist der Umriss seines Markups:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Ich verwende einen Einzelzeilen-Zeilencontainer mit Ansichtsfenster, um die Listen zu formatieren:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Zuweisen des automatischen Werts der überlauf-X-Eigenschaft, dass der Browser eine horizontale Bildlaufleiste am unteren Rand des Bildschirms anzeigen soll, wenn die Listen nicht in die vom Ansichtsfenster bereitgestellte Breite passen.

Die Flex -Shorthand -Eigenschaft wird für die Flex -Elemente verwendet, um die Listen starr zu erstellen. Der Autowert für die Flex-Base (in der Shorthand verwendet) weist die Layout-Engine an, die Gr??e der Breite des .list-Elements zu lesen, und die Nullwerte für Flex-Flex- und Flex-Shrink verhindern die ?nderung dieser Breite.

Als n?chstes muss ich eine horizontale Trennung zwischen den Listen hinzufügen. Wenn ein rechter Vorsprung auf den Listen festgelegt ist, wird der Rand nach der letzten Liste in einem Board mit horizontalem überlauf nicht gerendert. Um dies zu beheben, werden die Listen durch einen linken Rand getrennt, und der Speicherplatz zwischen der letzten und dem richtigen Ansichtsfenster wird durch Hinzufügen von :: nach Pseudo-Element zu jedem .Listen-Element behandelt. Der Standard-Flex-Shrink: 1 muss überschrieben werden. Andernfalls ?absorbiert“ der Pseudoelement den gesamten negativen Raum und es verschwindet.

Beachten Sie, dass auf Firefox

Die Kartenliste

Jede Kartenliste besteht aus einer Header -Bar, einer Kartenabfolge und einer Fu?zeile. Das folgende HTML -Snippet erfasst diese Struktur:

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Die entscheidende Aufgabe hier ist, wie Sie die H?he einer Liste verwalten. Die Kopfzeile und die Fu?zeile haben feste H?hen (nicht unbedingt gleich). Dann gibt es eine variable Anzahl von Karten, jeweils eine variable Menge an Inhalten. Die Liste w?chst und schrumpft vertikal, wenn Karten hinzugefügt oder entfernt werden.

Aber die H?he kann nicht auf unbestimmte Zeit wachsen, sie muss eine Obergrenze haben, die von der H?he des .listen -Elements abh?ngt. Sobald diese Grenze erreicht ist, m?chte ich, dass eine vertikale Bildlaufleiste anscheinend Zugriff auf die Karten erm?glicht, die die Liste überlaufen.

Dies klingt nach einem Job für die Eigenschaften der Maxi- und überlauf. Wenn diese Eigenschaften jedoch auf den Stammcontainer angewendet werden. List, dann wird die Bildlaufleiste für alle Elemente, Header und Fu?zeile enthalten, sobald die Liste ihre maximale H?he erreicht ist. Die folgende Abbildung zeigt die falsche Seitenleiste links und die richtige rechts:

Wenden wir stattdessen die Einschr?nkung der Max-H?he auf die innere

an. Welcher Wert sollte verwendet werden? Die H?hen des Headers und der Fu?zeile müssen von der H?he des List -übergeordneten Containers (.Listen) abgezogen werden:

<span><span><span><div</span> class<span>="ui"</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar app"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><nav</span> class<span>="navbar board"</span>></span>...<span><span></nav</span>></span>
</span>  <span><span><span><div</span> class<span>="lists"</span>></span>
</span>    <span><span><span><div</span> class<span>="list"</span>></span>
</span>      <span><span><span><header</span>></span>...<span><span></header</span>></span>
</span>      <span><span><span><ul</span>></span>
</span>        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>        ...
        <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>      <span><span><span></ul</span>></span>
</span>      <span><span><span><footer</span>></span>...<span><span></footer</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Aber es gibt ein Problem. Der prozentuale Wert bezieht sich nicht auf .Listen, sondern auf das übergeordnete Element des

Elements, und dieses Element hat keine bestimmte H?he und daher kann dieser Prozentsatz nicht behoben werden. Dies kann behoben werden, indem .List so gro? wie .listen:

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

Auf diese Weise, da .Liste immer so hoch ist wie .Listen, unabh?ngig von ihrem Inhalt, kann die Eigenschaft im Hintergrund nicht für die Listen-Hintergrundfarbe verwendet werden, aber es ist m?glich, ihre Kinder zu verwenden (Header, Fu?zeile, Karten ) für diesen Zweck.

Eine letzte Anpassung an die H?he der Liste ist erforderlich, um ein bisschen Platz ($ GAP) zwischen der unteren und unteren Rand des Ansichtsfensters zu berücksichtigen:

<span><span><span><div</span> class<span>="lists"</span>></span>
</span>  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span>  ...
  <span><span><span><div</span> class<span>="list"</span>></span>
</span>    ...
  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Eine weitere $ Scrollbar-Dickness-Menge wird abgezogen, um zu verhindern, dass die Liste die horizontale Bildlaufleiste des .list-Elements berührt. Tats?chlich w?chst diese Bildlaufleiste auf Chrom in der .lists -Box. Das hei?t, der 100% -Werwert bezieht

auf Firefox stattdessen ist die Bildlaufleiste au?erhalb der H?he der .listen ?angeh?ngt“, d. H. Der 100% bezieht sich auf die H?he von .listen, die nicht die Bildlaufleiste enthalten. Diese Subtraktion w?re also nicht notwendig. Wenn die Bildlaufleiste sichtbar ist, ist der visuelle Raum zwischen dem unteren Rand einer Liste, die seine maximale H?he erreicht hat, und die Oberseite der Bildlaufleiste etwas gr??er.

.

Hier sind die relevanten CSS -Regeln für diese Komponente:

<span>.lists {
</span><span>  <span>display: flex;</span>
</span><span>  <span>overflow-x: auto;</span>
</span>  <span>> * {
</span><span>    <span>flex: 0 0 auto; // 'rigid' lists</span>
</span><span>    <span>margin-left: $gap;</span>
</span>  <span>}
</span><span>  <span>&::after {</span>
</span><span>    <span>content: '';</span>
</span><span>    <span>flex: 0 0 $gap;</span>
</span>  <span>}
</span><span>}</span>

Wie bereits erw?hnt, wird die Listen-Hintergrundfarbe durch Zuweisen des Werts von $ list-bg-color der Hintergrund-Color-Eigenschaft der Kinder des einzelnen Elements gerendert. überlauf-y zeigt die Karten-Scrollbar nur bei Bedarf. Schlie?lich wird dem Header und der Fu?zeile ein einfaches Styling hinzugefügt.

Schliff

beenden

Die HTML für eine einzige Karte besteht einfach aus einem Listenelement:

<span><span><span><div</span> class<span>="list"</span>></span>
</span>  <span><span><span><header</span>></span>List header<span><span></header</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>    ...
    <span><span><span><li</span>></span>...<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span>  <span><span><span><footer</span>></span>Add a card...<span><span></footer</span>></span>
</span><span><span><span></div</span>></span></span>

oder, wenn die Karte ein Titelbild hat:

<span>ul {
</span><span>  <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>}</span>

Dies ist das relevante CSS:

<span><span>.list</span> {
</span>  <span>height: 100%;
</span><span>}</span>

Nachdem ein Hintergrund, eine Polsterung und die unteren R?nder festgelegt wurden, ist das Cover -Bildlayout fertig. Die Bildbreite muss die gesamte Karte von der linken Polsterkante bis zur rechten Polsterkante überspannen:

<span>.list {
</span><span>  <span>height: calc(100% - #{$gap} - #{$scrollbar-thickness});</span>
</span><span>}</span>

Dann werden negative R?nder zugewiesen, um das Bild horizontal und vertikal auszurichten:

<span>.list {
</span><span>  <span>width: $list-width;</span>
</span><span>  <span>height: calc(100% - #{$gap} - #{$scrollbar-thickness});</span>
</span>
  <span>> * {
</span><span>    <span>background-color: $list-bg-color;</span>
</span><span>    <span>color: #333;</span>
</span><span>    <span>padding: 0 $gap;</span>
</span>  <span>}
</span>
  <span>header {
</span><span>    <span>line-height: $list-header-height;</span>
</span><span>    <span>font-size: 16px;</span>
</span><span>    <span>font-weight: bold;</span>
</span><span>    <span>border-top-left-radius: $list-border-radius;</span>
</span><span>    <span>border-top-right-radius: $list-border-radius;</span>
</span>  <span>}
</span>
  <span>footer {
</span><span>    <span>line-height: $list-footer-height;</span>
</span><span>    <span>border-bottom-left-radius: $list-border-radius;</span>
</span><span>    <span>border-bottom-right-radius: $list-border-radius;</span>
</span><span>    <span>color: #888;</span>
</span>  <span>}
</span>
  <span>ul {
</span><span>    <span>list-style: none;</span>
</span><span>    <span>margin: 0;</span>
</span><span>    <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>    <span>overflow-y: auto;</span>
</span>  <span>}
</span><span>}</span>

Der dritte positive Margenwert kümmert sich um den Speicherplatz zwischen dem Titelbild und dem Kartentext.

Schlie?lich habe ich den beiden Balken einen Flex -Formatierungskontext hinzugefügt, der die ersten Reihen des Bildschirmlayouts einnimmt. Aber sie werden nur skizziert. Fühlen Sie sich frei, Ihre eigene Umsetzung zu erstellen, indem Sie die Demo erweitern.

Schlussfolgerung

Dies ist nur eine m?gliche M?glichkeit, dieses Design zu erreichen, und es w?re interessant, andere Ans?tze zu sehen. Au?erdem w?re es sch?n, das Layout abzuschlie?en, zum Beispiel die beiden Bildschirmstangen.

Eine weitere potenzielle Verbesserung k?nnte die Implementierung von benutzerdefinierten Scrollbars für die Kartenlisten sein.

Fühlen Sie sich also frei, die Demo zu geben und einen Link in der folgenden Diskussion zu ver?ffentlichen.

H?ufig gestellte Fragen (FAQs) zum Erstellen eines Trello -Layouts mit CSS Grid und Flexbox

Wie kann ich ein trello?hnliches Layout mit CSS-Gitter und Flexbox erstellen? Zun?chst müssen Sie eine grundlegende HTML -Struktur für Ihr Layout erstellen. Dies beinhaltet das Erstellen eines Containers für Ihr Board und einzelne Container für Ihre Listen und Karten. Als n?chstes wenden Sie CSS -Gitter auf den Board Container an, um ein Netzlayout zu erstellen. Sie k?nnen dann Flexbox verwenden, um Ihre Listen und Karten in ihren jeweiligen Containern zu ordnen. Auf diese Weise k?nnen Sie ein reaktionsschnelles, flexibles Layout erstellen, mit dem eine beliebige Anzahl von Listen und Karten gerecht werden kann. CSS Grid und Flexbox bieten mehrere Vorteile für die Erstellung eines trello?hnlichen Layouts. Sie erm?glichen es Ihnen, ein reaktionsschnelles Layout zu erstellen, das sich an verschiedene Bildschirmgr??en und -orientierungen anpassen kann. Sie bieten auch ein flexibles Layout -System, mit dem eine beliebige Anzahl von Listen und Karten gerecht werden kann. Darüber hinaus bieten sie leistungsstarke Ausrichtungs- und Verteilungssteuerung und erleichtern es einfach, ein sauberes, organisiertes Layout zu erstellen. Gitter und Flexbox sind vielseitige Layoutsysteme, mit denen eine Vielzahl von Layouts erstellt werden kann. Sie k?nnen einzeln oder in Kombination verwendet werden, um komplexe, reaktionsschnelle Layouts zu erzeugen. Egal, ob Sie ein einfaches zweispaliges Layout oder ein komplexes Netzlayout erstellen, CSS-Raster und Flexbox k?nnen die ben?tigten Tools liefern.

Machen Sie Ihr trello?hnliches Layout mit CSS-Raster und Flexbox mit Medienabfragen zur Anpassung Ihres Layouts anhand der Bildschirmgr??e. Sie k?nnen Medienabfragen verwenden, um die Anzahl der Netzspalten zu ?ndern oder die Flex -Eigenschaften Ihrer Listen und Karten anzupassen. Auf diese Weise kann sich Ihr Layout an verschiedene Bildschirmgr??en und -orientierungen anpassen und eine konsistente Benutzererfahrung auf allen Ger?ten sicherstellen. Trello-?hnliches Layout kann mit JavaScript erreicht werden. Sie k?nnen JavaScript verwenden, um Ihren Karten Drag & Drop-Funktionen hinzuzufügen, sodass Benutzer Karten zwischen Listen verschieben k?nnen. Sie k?nnen auch JavaScript verwenden, um andere interaktive Funktionen hinzuzufügen, z. B. die M?glichkeit, neue Karten oder Listen hinzuzufügen.

Gibt es Einschr?nkungen bei der Verwendung von CSS-Raster und Flexbox zum Erstellen eines trello?hnlichen Layouts? Beispielsweise werden sie bei ?lteren Browsern m?glicherweise nicht vollst?ndig unterstützt. Auch wenn sie ein flexibles Layout -System bereitstellen, sind sie m?glicherweise nicht für alle Arten von Layouts geeignet. Es ist wichtig, diese Einschr?nkungen zu verstehen und bei Bedarf alternative L?sungen zu berücksichtigen.

Wie kann ich das Erscheinungsbild meines trello?hnlichen Layouts anpassen? mit CSS. Sie k?nnen CSS verwenden, um die Farben, Schriftarten und andere visuelle Elemente Ihres Layouts zu ?ndern. Sie k?nnen auch CSS verwenden, um Effekte wie Schatten oder überg?nge hinzuzufügen, um die Benutzererfahrung zu verbessern. ??> W?hrend CSS -Gitter und Flexbox relativ fortschrittliche CSS -Funktionen sind, k?nnen sie mit einigen Studien und Praxis erlernt werden. Es gibt viele online verfügbare Ressourcen, einschlie?lich Tutorials und Anleitungen, mit denen Sie lernen k?nnen, wie diese Funktionen verwendet werden. Mit einiger Zeit und Mühe k?nnen Sie mit CSS-Raster und Flexbox ein trello?hnliches Layout erstellen, auch wenn Sie ein Anf?nger sind. ??> Probleme mit der Fehlerbehebung mit Ihrem trello?hnlichen Layout k?nnen mit Entwicklertools in Ihrem Browser durchgeführt werden. Mit diesen Tools k?nnen Sie Ihre HTML und Ihr CSS inspizieren, um Probleme zu identifizieren und zu beheben. Sie k?nnen auch Online-Foren oder Communities wie Stack-überlauf verwenden, um Fragen zu stellen und Hilfe von anderen Entwicklern zu erhalten. Trello-?hnliches Layout für die Leistung kann mehrere Strategien beinhalten. Dies beinhaltet die Minimierung Ihres CSS und Ihres JavaScript, die Verwendung effizienter CSS -Selektoren und die Optimierung Ihrer Bilder. Sie k?nnen auch Leistungstools wie Google Lighthouse verwenden, um Ihr Layout zu analysieren und Verbesserungsbereiche zu identifizieren.

Das obige ist der detaillierte Inhalt vonErstellen eines Trello -Layouts mit CSS Grid und Flexbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!