CSS 太棒了！

我正在學習什麼

CSS 賦予了頁面活力。多年來，CSS 變得越來越強大，並且已經開始用於製作以前需要 JavaScript 的動畫。本週我一直在研究它的一些更高級的屬性。

媒體查詢

媒體查詢幾乎已經成為新時代設備的必需品。隨著智慧型手機的出現，透過手機消費媒體的人比其他任何設備都多。因此，網站不僅需要在行動裝置上看起來不錯，而且在大尺寸螢幕上也有良好的呈現效果。我們該如何做到這一點？嗯，部分......

彈性盒！

當將媒體查詢與 Flexbox 結合時，CSS 成為工具箱的強大工具。 （幾乎是一種類似 UNIX 的哲學，將小工具組合成一個大工具）現在我們可以做一些非常酷的事情。

實際上，Flexbox 將根據您設定的 Flexbox 規則來處理框中的第一個子元素：

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

這是我第一次真正嘗試使用 Flexbox，因此我提供了一些材料，這些材料可以為您提供比我上面的簡短解釋更完整的資訊。其中的內容遠比我在這裡所能涵蓋的更多。

附加參考材料

MDN：使用媒體查詢
MDN：Flexbox
CSS 技巧：Flexbox 指南

玩 Flexbox

查看：https://flexboxfroggy.com
另：https://mastery.games/post/flexboxzombies2/
現在您可以真正使用 Flexbox 了！

我接下來要做什麼？

現在我們進入有趣的部分了。有了我學到的一些基本工具，現在我要開始製作作品集了。作品集是向雇主和其他人展示您一直在做什麼的一種方式。我預計隨著我的繼續，這種情況會改變很多次。但首先，讓我們看看是否能讓作品集看起來不錯！ CSS 會幫助我做到這一點。推動並看看我能用它做什麼應該很有趣。我預計會遇到一些障礙，甚至可能需要在下一步寫作時糾正一些理解，所以我不會將其視為 CSS 和 Flexbox 的明確看法。

隨機的離別的想法

需要一些 Lorem Ipsum 佔位符嗎？為什麼不加點香料呢！

• https://baconipsum.com/ -- 非常適合肉食動物
• http://officeipsum.com -- 如果你想嚴重冒犯我，就用這個。
• https://cupcakeipsum.com -- 對於我們當中的甜食愛好者來說。

對於 VSCode 用戶，一些擴充：

• lotus-ipsum: 萬智牌佔位符文字
• Horadrim ipsum：獻給暗黑破壞神粉絲！

以上是CSS 太棒了！的詳細內容。更多資訊請關注PHP中文網其他相關文章！