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 指南
查看：https://flexboxfroggy.com
另：https://mastery.games/post/flexboxzombies2/
現在您可以真正使用 Flexbox 了！
現在我們進入有趣的部分了。有了我學到的一些基本工具，現在我要開始製作作品集了。作品集是向雇主和其他人展示您一直在做什麼的一種方式。我預計隨著我的繼續，這種情況會改變很多次。但首先，讓我們看看是否能讓作品集看起來不錯！ CSS 會幫助我做到這一點。推動並看看我能用它做什麼應該很有趣。我預計會遇到一些障礙，甚至可能需要在下一步寫作時糾正一些理解，所以我不會將其視為 CSS 和 Flexbox 的明確看法。
需要一些 Lorem Ipsum 佔位符嗎？為什麼不加點香料呢！
對於 VSCode 用戶，一些擴充：
以上是CSS 太棒了！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
