點燈坊

學而時習之,不亦悅乎

Tag : CSS

CSS Flexbox 之改變顯示順序

RWD 因為寬度改變,實務上可能會想調整顯示順序,由於 Browser 是依 HTML 順序顯示,若要改變顯示順序,傳統可由後端送出全新 HTML,或由前端 JavaScript 改變 HTML,事實上透過 Flexbox 的 order,能在不回到後端,不使用前端 JavaScript 前提下,直接改變 Browser 顯示順序。

CSS Flexbox 之間隔等距

有時候 Item 並沒有完全均分 Container,而希望其間距相等,也就是剩餘寬度被間距均分,此時可使用 justify-contentspace 系列設定。

如何自動依寬度為 String 加上 ... ?

由 API 所回傳的資料可能過長而換行顯示,但有時我們不希望換行影響版面,而想直接在該行截斷 String 加上 ... 即可,當然可以使用 JavaScript 處理,但隨著 RWD 寬度改變,JavaScript 將面臨挑戰,比較好的方式是使用 CSS 解決。

CSS Text 之 white-space

Browser 預設對於 white space 會加以合併,且 寬度不足 時自動換行,若想改變這些預設行為,就要設定 white-space

CSS Flexbox 初體驗

Flexbox 為 CCS 3 所引進的新 Layout,新的 CSS Framework 如 Bootstrap 4、Vuetify 都是使用 Flexbox,雖然 Framework 提供了 Class 或 Property 讓你簡單使用,但其骨子裡仍是 CSS 3 的 Flexbox,因此深入了解是必須的。

如何觀察 Typora CSS ?

Typora 是使用 Electorn 技術的 macOS App,也因此可自行使用 CSS 開發 Theme,或者利用既有的 Theme 加以微調 CSS,但該如何觀察 CSS 呢 ?