CSS est génial !

Ce que j'apprends

Le CSS est ce qui donne à la page son piquant. Au fil des années, CSS est devenu plus puissant et a fait son chemin dans la création d'animations qui nécessitaient auparavant JavaScript. Cette semaine, j'ai travaillé sur certaines de ses propriétés les plus avancées.

Requêtes médiatiques

Les requêtes multimédias sont devenues presque une nécessité pour la nouvelle ère des appareils. Avec l’avènement des smartphones, de plus en plus de personnes consomment des médias via leur téléphone plutôt que via tout autre appareil. En tant que tel, il est nécessaire que le site ait une belle apparence sur mobile, mais également une bonne présentation lorsqu'il s'agit d'écrans de plus grande taille. Et comment fait-on cela ? Eh bien en partie...

Flexbox!

En combinant les requêtes multimédias avec flexbox, CSS devient un outil puissant pour la boîte à outils. (Presque une philosophie de type UNIX consistant à combiner de petits outils en un seul grand outil) Nous pouvons maintenant faire des choses vraiment sympas.

Effectivement, Flexbox traitera les premiers enfants de la box selon les règles de flexbox que vous aurez définies :

.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...*/
}

Il s'agit de ma première véritable tentative de jouer avec Flexbox, je vous propose donc du matériel qui peut vous fournir des informations plus complètes que mes explications succinctes ci-dessus. Il y a bien plus à découvrir que ce que je peux couvrir ici.

Matériel de référence supplémentaire

MDN : utilisation des requêtes multimédias
MDN : Flexbox
Astuces CSS : Un guide de flexbox

Jouer avec Flexbox

Découvrez : https://flexboxfroggy.com
Aussi : https://mastery.games/post/flexboxzombies2/
Vous pouvez désormais littéralement jouer avec flexbox !

Quelle est la prochaine étape pour moi ?

Maintenant, passons à la partie amusante. Avec certains des outils de base que j'ai appris, je vais maintenant commencer à créer le portfolio. Les portfolios sont un moyen de montrer aux employeurs et aux autres ce que vous faites. Je m'attends à ce que cela change plusieurs fois au fur et à mesure que j'avance. Mais pour commencer, voyons si nous pouvons donner une belle apparence au portefeuille ! CSS m'aidera à le faire. Ça devrait être amusant de pousser et de voir ce que je peux en faire. Je m'attends à rencontrer certains obstacles et j'aurai peut-être même besoin de corriger une certaine compréhension lorsque j'écrirai ensuite, donc je ne considérerais pas cela comme une version définitive de CSS et Flexbox.

Une pensée d'adieu aléatoire

Besoin d'un espace réservé au Lorem Ipsum ? Pourquoi ne pas pimenter un peu le tout !

• https://baconipsum.com/ -- Parfait pour le carnivore
• http://officeipsum.com -- Si vous souhaitez m'offenser grandement, utilisez ceci.
• https://cupcakeipsum.com -- Pour les gourmands parmi nous.

Pour les utilisateurs de VSCode, quelques extensions :

• lotus-ipsum : Texte de l'espace réservé Magic The Gathering
• Horadrim ipsum :Pour les fans de Diablo !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!