如何在 CSS 中使用特性查詢 特性查詢是 CSS 的一個近期且相對較不為人知的功能，但它得到了良好的支持。 我們可以使用它來檢查瀏覽器是否支援某個特性，方法是使用 @supports 關鍵字。 舉個例子，這在目前的時候，檢查瀏覽器是否支援 CSS Grid 特別有用，可以這樣做： @supports (display: grid) { /* 應用這個 CSS */ } 我們檢查瀏覽器是否支援 display 屬性的 grid 值。 我們可以使用 @supports 來檢查任何 CSS 屬性，並檢查任何值。 我們還可以使用邏輯運算符 and、or 和 not 來構建複雜的特性查詢。 以下示例檢查瀏覽器是否同時支援 CSS Grid 和 Flexbox： @supports (display: grid) and (display: flex) { /* 應用這個 CSS */ }
Flexbox，也被稱為靈活盒子模型，是兩種現代佈局系統之一，與 CSS Grid 一起使用。 介紹 瀏覽器支援 啟用 Flexbox 容器屬性 對齊行或列 垂直和水平對齊 更改水平對齊 更改垂直對齊 關於 baseline 的注意事項 包裝 適用於每個單個項目的屬性 使用順序在其他項目之前/之後移動項目 使用 align-self 進行垂直對齊 根據需要增加或減少項目的大小 flex-grow flex-shrink flex-basis flex 介紹 Flexbox，也被稱為靈活盒子模型，是兩種現代佈局系統之一，與 CSS Grid 一起使用。 與 CSS Grid（雙維）相比，flexbox 是一種單維度佈局模型。它根據行或列對佈局進行控制，但不能同時進行控制。 Flexbox 的主要目標是允許項目根據您設置的某些規則填充其容器提供的整個空間。 除非您需要支援像 IE8 和 IE9 這樣的舊瀏覽器，否則 Flexbox 是一個讓您忘記使用以下工具的工具: 表格佈局 漂浮 clearfix hacks display: table hacks 讓我們深入研究 flexbox，並在非常短的時間內成為它的大師吧。 瀏覽器支援 截至撰寫本文（2018 年 2 月），它獲得了 97.66% 的用戶支援，所有最重要的瀏覽器都已實施它多年，因此即使是舊瀏覽器（包括 IE10+）也得到了支援: 雖然我們必須等待幾年讓用戶趕上 CSS Grid，但 Flexbox 是一個較舊的技術，現在可以使用。 啟用 Flexbox 通過設置...
這裡演示了如何將一個 div 元素固定在頁面底部。 以下是一個簡單的範例，展示了如何將一個 div 元素對齊到頁面底部。 我在高度超出視窗的情況下，需要將一個元素固定在頁面底部，但如果屏幕尺寸不夠，它仍然需要跟隨頁面流動。 以下是我使用 Tailwind CSS 創建的非常簡化的範例： <html> <body class="text-center"> <p>test</p> <p>© 2022</p> </body> </html> 我們希望 “footer” HTML 元素使用 Flexbox 固定在底部。 首先，我們使用 Flexbox (flex flex-col)，並且將最小高度設置為屏幕高度 (min-h-screen)。 接下來，我們在 footer 元素之前添加 flex-grow 屬性： <html> <body class="text-center min-h-screen flex flex-col"> <p class="flex-grow">test</p> <p>© 2022</p> </body> </html> 這段代碼生成以下結果：
我總是容易忘記如何使用 Flexbox 將文字垂直置中對齊。 你需要一個包含下列 CSS 指令的容器： display: flex; align-items: center; justify-content: center; 在 Tailwind 中，這被翻譯成 flex items-center justify-center 這些類別。 範例： <div class='flex items-center justify-center'> <button>新增</button> </div>
使用CSS居中元素，有些元素容易操作，有些则比较困难。下面是完整的如何使用CSS居中的方法，包括现代CSS技术。 在CSS中居中元素的方法在水平和垂直方向上是非常不同的。 在本文中，我将解释最常见的情况以及如何解决它们。如果Flexbox 提供了一种新的解决方案，我将忽略旧的技术，因为我们需要向前发展，而且Flexbox已经得到了浏览器的支持，包括IE10。 水平居中 文本 文本可以通过将text-align属性设置为center来实现水平居中： p { text-align: center; } 块级元素 居中任何非文本块级元素的现代方法是使用Flexbox： #mysection { display: flex; justify-content: center; } #mysection内的任何元素都将水平居中。 以下是不使用Flexbox的替代方法。 任何非文本类型的元素都可以通过为左右自动设置外边距并设置元素的宽度来居中： section { margin: 0 auto; width: 50%; } 上述的margin: 0 auto;是以下缩写方式的简写： section { margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; } 如果元素是内联元素，请记得将其设置为display: block。 垂直居中 传统上，垂直居中一直是一项困难的任务。通过Flexbox，我们现在可以以最简单的方式实现这一目标： #mysection { display: flex; align-items: center; } #mysection内的任何元素都将垂直居中。 同时垂直和水平居中 垂直和水平居中的Flexbox技巧可以结合在一起，完全将元素居中在页面中： #mysection { display: flex; align-items: center; justify-content: center; } 同样的效果也可以使用CSS Grid来实现：...
Flexbox 已經成為我喜歡的元素居中方式。 你只需要將一個元素包裹在 div 中，並設置 display: flex 和 justify-content: center。 <div class="wrapper"> ... </div> .wrapper { display: flex; justify-content: center; } 使用 Tailwind CSS 更加簡單，只需要添加 flex 和 justify-center 類名： <div class="flex justify-center"> ... </div>