CSS adalah Hebat!

Apa yang saya belajar

CSS ialah perkara yang memberikan halaman yang menarik. Selama bertahun-tahun, CSS, telah menjadi lebih berkuasa dan telah membuat cara untuk melakukan animasi yang memerlukan JavaScript sebelum ini. Minggu ini saya telah meneliti beberapa sifatnya yang lebih maju.

Pertanyaan media

Pertanyaan media telah menjadi hampir satu keperluan untuk era baharu peranti. Dengan kemunculan telefon pintar, lebih ramai orang menggunakan media melalui telefon mereka berbanding peranti lain. Oleh itu, tapak itu perlu kelihatan baik pada Mudah Alih, tetapi juga mempunyai persembahan yang baik apabila ia berkaitan dengan skrin bersaiz lebih besar. Dan bagaimana kita melakukannya? Baiklah sebahagiannya...

Flexbox!

Apabila menggabungkan pertanyaan media dengan flexbox, CSS menjadi alat yang berkuasa untuk kotak alat. (Hampir UNIX seperti falsafah alat kecil bergabung menjadi satu alat besar) Kini kita boleh melakukan beberapa perkara yang sangat hebat.

Dengan berkesan, Flexbox akan merawat kanak-kanak pertama dalam kotak mengikut peraturan flexbox yang anda tetapkan:

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

Ini adalah percubaan sebenar pertama saya untuk bermain-main dengan Flexbox, jadi saya menyediakan beberapa bahan yang boleh memberikan anda beberapa maklumat yang lebih lengkap daripada penjelasan saiz gigitan saya di atas. Terdapat lebih banyak perkara daripada yang boleh saya bincangkan di sini.

Bahan rujukan tambahan

MDN: Menggunakan Pertanyaan Media
MDN: Flexbox
Trik CSS: Panduan untuk flexbox

Bermain dengan Flexbox

Lihat: https://flexboxfroggy.com
Juga: https://mastery.games/post/flexboxzombies2/
Kini anda benar-benar boleh bermain dengan flexbox!

Apa yang seterusnya untuk saya?

Sekarang kita sampai ke bahagian yang menyeronokkan. Dengan beberapa alat asas yang saya pelajari, kini saya akan mula membuat portfolio. Portfolio ialah satu cara untuk menunjukkan kepada majikan dan orang lain perkara yang anda telah lakukan. Saya menjangkakan ini akan berubah berkali-kali semasa saya meneruskan. Tetapi untuk memulakan, mari lihat sama ada kita boleh mendapatkan portfolio kelihatan baik! CSS akan membantu saya melakukannya. Pasti menyeronokkan untuk menolak dan melihat apa yang boleh saya lakukan dengannya. Saya menjangkakan akan menghadapi beberapa halangan dan mungkin perlu membetulkan beberapa pemahaman apabila saya menulis seterusnya, jadi saya tidak akan melihat ini sebagai pandangan muktamad tentang CSS dan Flexbox.

Pemikiran Perpisahan Rambang

Perlukan beberapa pemegang tempat Lorem Ipsum? Kenapa tidak perasankan sedikit!

• https://baconipsum.com/ -- Sesuai untuk karnivor
• http://officeipsum.com -- Jika anda ingin menyinggung perasaan saya, gunakan ini.
• https://cupcakeipsum.com -- Untuk kemanisan sesama kita.

Untuk Pengguna VSCode, beberapa sambungan:

• lotus-ipsum: Teks Pemegang Tempat Magic The Gathering
• Horadrim ipsum: Untuk peminat Diablo!

Atas ialah kandungan terperinci CSS adalah Hebat!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!