CSS ist großartig!

Was ich lerne

CSS verleiht der Seite das gewisse Etwas. Im Laufe der Jahre ist CSS immer leistungsfähiger geworden und hat Einzug in die Erstellung von Animationen gehalten, für die zuvor JavaScript erforderlich war. Diese Woche habe ich einige seiner fortgeschritteneren Eigenschaften durchgearbeitet.

Medienanfragen

Medienabfragen sind für die neue Ära der Geräte fast zu einer Notwendigkeit geworden. Mit dem Aufkommen des Smartphones konsumieren mehr Menschen Medien über ihr Telefon als über jedes andere Gerät. Daher ist es wichtig, dass die Website auf Mobilgeräten gut aussieht, aber auch auf größeren Bildschirmen gut dargestellt wird. Und wie machen wir das? Na ja, teilweise...

Flexbox!

Bei der Kombination von Medienabfragen mit Flexbox wird CSS zu einem leistungsstarken Werkzeug für die Toolbox. (Fast eine UNIX-ähnliche Philosophie, bei der kleine Tools zu einem großen Tool kombiniert werden.) Jetzt können wir einige wirklich coole Sachen machen.

Effektiv behandelt Flexbox die ersten Kinder in der Box gemäß den von Ihnen festgelegten Flexbox-Regeln:

.flexbox {
    /* Turns on flexbox */
    display: flex;
    /* How would you like stuff displayed? Rows, columns... maybe display the items in reverse order?*/
    flex-direction: row;
    /* How do you want to spacing between your items to work? */
    justify-content: flex-end;
    /* How do you want items arranged on the main axis? */
    align-items: center;
    /*And so on...*/
}

Dies ist mein erster wirklicher Versuch, mit Flexbox herumzuspielen, daher stelle ich einige Materialien zur Verfügung, die Ihnen umfassendere Informationen liefern können als meine obigen häppchenförmigen Erklärungen. Es steckt viel mehr dahinter, als ich hier behandeln kann.

Zusätzliches Referenzmaterial

MDN: Medienabfragen verwenden
MDN: Flexbox
CSS-Tricks: Eine Anleitung zu Flexbox

Spielen mit Flexbox

Schauen Sie sich an: https://flexboxfroggy.com
Außerdem: https://mastery.games/post/flexboxzombies2/
Jetzt können Sie buchstäblich mit Flexbox spielen!

Was kommt als nächstes für mich?

Jetzt kommen wir zum spaßigen Teil. Mit einigen der grundlegenden Werkzeuge, die ich gelernt habe, werde ich jetzt mit der Erstellung des Portfolios beginnen. Portfolios sind eine Möglichkeit, Arbeitgebern und anderen zu zeigen, was Sie getan haben. Ich gehe davon aus, dass sich dies im weiteren Verlauf noch oft ändern wird. Aber zunächst einmal wollen wir sehen, ob das Portfolio gut aussieht! CSS wird mir dabei helfen. Es sollte Spaß machen, es anzutreiben und zu sehen, was ich damit machen kann. Ich gehe davon aus, dass ich auf einige Hürden stoße und möglicherweise sogar einige Verständnisprobleme korrigieren muss, wenn ich das nächste Mal schreibe, daher würde ich dies nicht als eine endgültige Version von CSS und Flexbox betrachten.

Ein zufälliger Abschiedsgedanke

Benötigen Sie einen Platzhalter für Lorem Ipsum? Warum es nicht ein bisschen aufpeppen!

• https://baconipsum.com/ – Perfekt für Fleischfresser
• http://officeipsum.com – Wenn Sie mich stark beleidigen möchten, verwenden Sie dies.
• https://cupcakeipsum.com – Für die Naschkatzen unter uns.

Für VSCode-Benutzer einige Erweiterungen:

• lotus-ipsum: Magic The Gathering Platzhaltertext
• Horadrim ipsum:Für die Diablo-Fans!

Das obige ist der detaillierte Inhalt vonCSS ist großartig!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!