貢獻者66
粉絲0
item的換行 默認情況下，item都排在一條軸線上： 使用 flex-wrap 可以使一條軸線排不下的情況下換行。 div style="display:flex; flex-wrap:wrap" div style="background-color: yellow; min-width: 200px;height: 200px;"Item 1/div div style="bac
昵稱 Erin
網頁佈局是css的一個重點應用。傳統的佈局都是依賴display、position、float屬性來實現的，但是特殊佈局就不易實現，如垂直居中。 01 flex佈局是什麼？ Flex 是 Flexible Box的簡寫，意為“彈性佈局”為盒模型提供最大靈活性。任何一個容器都可以指定為flex佈局。 採用flex佈局的元素，稱為flex容器。他的所有子元素自動成為容器成員，稱為flex項目，簡稱項
昵稱 前端知識搬運工
網頁佈局是css的一個重點應用。傳統的佈局都是依賴display、position、float屬性來實現的，但是特殊佈局就不易實現，如垂直居中。 flex佈局是什麼？ Flex 是 Flexible Box的簡寫，意為“彈性佈局”為盒模型提供最大靈活性。任何一個容器都可以指定為flex佈局。 採用flex佈局的元素，稱為flex容器。他的所有子元素自動成為容器成員，稱為flex項目，簡稱項目。
昵稱 前端知識搬運工
Flexbox 是一種 CSS 佈局機制，可以説是目前瀏覽器原生支持的最好、使用最廣泛的佈局機制了。本文通過一些例子來説明 Flexbox 佈局的工作原理，可以讓我們更好的使用 Flexbox。 與 CSS Grid 可以同時在橫向和縱向兩個方向進行佈局不同，Flexbox 只能在單一方向上進行佈局，即要麼橫向，要麼縱向。所謂佈局，其實就是空間的分配過程，也就是説計算元素尺寸和容器剩餘空間尺寸的過
昵稱 廣吾
2020 年的Chrome 開發者峯會和往年有所不同，今年是在線上召開的，每次談話大約十分鐘，討論規模更大。雖然我沒有在第一時間觀看會議的直播，但是看回放也不會錯過這些亮點。 所有的回放在這裏：https://developer.chrome.com/... 通過“Core Web Vitals”簡化了性能指標 我們都知道 Chrome 有大量的性能指標，可以用它們來跟蹤關於網站性能的所有內容。儘
昵稱 瘋狂的技術宅
在等保 2.0 測評中，免費 SSL 證書能否通過密評（密碼應用安全性評估）取決於其是否支持國密算法（SM2/SM3/SM4）及合規性認證。以下是關鍵分析與解決方案： SSL證書入口⬇️ https://www.joyssl.com/certificate/select/free.html?nid=59 一、等保 2.0 對 SSL 證書的核心要求 密碼算法合規性 等
昵稱 追風的苦咖啡
本文首發國內開源代碼託管平台Gitee 文章地址： https://gitee.com/gooder4j/compose-hub/issues/I4U78Q 覺得不錯的話，你的star是對我最大的支持！ Formatting Context簡單理解，就是定義了佈局規則的一片區域。它的類型包括： Block Formatting Context，簡稱BFC Inl
昵稱 compose_hub
今天解析來自John Rosato的一篇文章“What is document flow?”，什麼是文檔流？ 開頭是摘要： 文檔流是由 CSS 定位語句定義的頁面元素的排列，以及 HTML 元素的順序。 也就是説，每個元素如何佔用空間以及其他元素如何相應地定位自己。 簡單點説，就是 document flow 指示了頁面上的元素如何去排列。 接着，講到了 document flow 的三種影響元
昵稱 compose_hub
本文翻譯自 CSS Grid and Custom Shapes, Part 1，略有刪改 在正常的開發中，我們會遇到很多元素塊排列對齊的需求，如九宮格抽獎，多張圖片上傳後等分佈局預覽，微信朋友圈多張圖片展示等。這都是正常的正方形很規整的佈局。 如下所示，如果圖像不是完全正方形，而是形狀像六邊形或菱形怎麼辦？我們怎麼做呢。事實上，我們將結合我們已經研究過的 CSS 網格技術，並加入一些 CSS c
昵稱 南城FE
CSS 有一些屬性經常被用來解決佈局問題：如（浮動float、定位postion）這些比較 hack 的方法經常會給頁面遺留下一些問題。 彈性盒子Flexbox是一個非常好的佈局工具，網格佈局 CSS Grid Layout 是最新、更強大的佈局方式。本文就來簡單介紹一下什麼是網格佈局。 網格佈局(CSS Grid Layout) 網格佈局是二維的佈局系統，和過去常用的佈局方式相比完全改變
昵稱 來了老弟
居中佈局在實際場景中很常見，在面試當中也經常會被考察。 以下分別是水平居中和垂直居中常用的樣式。 水平居中 margin: 0 auto; + width 應用於塊級元素居於容器中間 若節點不是塊級元素，需聲明display: block 若節點寬度已隱式聲明則無需顯式聲明width div class="h-c1" p談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。/p /div
昵稱 beckyyyy
本文記錄一個css小技巧，不難，不過可能自己一時間想不到 問題描述 我們有這樣的需求，大容器中有很多的盒子，從左往右排列，空間不夠的話，然後換行，繼續從左往右排列，如下效果圖 看到這樣的需求，我們第一時間想到的就是彈性盒佈局，給大容器開啓彈性盒、允許換行，兩側分佈，於是會寫下如下代碼： display: flex; flex-wrap: wrap; justify-content: space-
昵稱 水冗水孚
本文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有刪改 在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當然這些技術可用於任何類型的元素。 初始化 我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是HTML： artic
昵稱 南城FE
在前端的面試中，相對JavaScript而言，CSS佈局方面考察的內容會相對少一些，其中BFC是佈局樣式方面常考的一個考點。 什麼是BFC BFC，全稱為Block Formatting Context，翻譯過來即塊格式化上下文。 之前在其他文章中看到的説明是，網頁上一個獨立且隔離的渲染區域。現在呢，我稍微查閲了一些官方的信息。 在瞭解BFC之前，我們需要先了解一些其他概念： 包含塊（contai
昵稱 beckyyyy
利用grid佈局可以高效地實現二維佈局。但是其眾多的屬性以及屬性值，讓很多剛剛接觸的人和沒有系統性總結的人云裏霧裏，這增加了使用grid的成本。 為此，從實用角度出發，按照類別，系統性地總結了日常開發常用的知識點。 網格容器屬性 聲明元素為網格佈局 通過 display: grid 聲明某個元素為網格佈局： .wrapper { /* 聲明一個容器 */ display: grid;
昵稱 Steven
Ionic Framework 內置的圖標庫，免費開源、數量多，性能還不錯，無論是開發還是設計，都是一個優質的資源。 關於 Ionicons Ionicons 是一個完全開源的圖標集，是知名混合開發框架 Ionic Framework 內置的圖標庫，包含 1300 個為 Web / iOS / Android 和桌面應用程序專門定製的圖標。Ionic Framework 是一個跨平台的混合
昵稱 搬不要錢的磚
介紹 sublime autoprefix css是sublime中自動添加css兼容性前綴插件。 問題 如果mac上nodejs非系統默認安裝路徑時運行失效，找不到node 通過查看autoprefix github上的readme説明知道原因是autoprefix在mac中只能通過“/usr/local/bin”路徑加載node。 解決辦法 在“/usr/local/bin”目錄下添加n
昵稱 chris
前言 當我們使用 Webpack 搭建一個基於 Vue 的服務端渲染項目時，通常會遇到一個很麻煩的問題，即我們無法提前獲取到當前頁面所需的資源，從而不能提前加載當前頁面所需的 CSS，導致客户端在獲取到服務端渲染的 HTML 時，得到的只有 HTML 文本而沒有 CSS 樣式，之後需要等待一會兒才能將 CSS 加載出來，也就是會遇到『樣式閃爍』這樣的問題。 如果你想要完整 SSR 實踐，可以參考：
昵稱 EsunR
網頁佈局（layout）是 CSS 的一個重點應用222。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地
昵稱 遺失的美好灬
我先問 2 個問題： 你是不是用主軸-交叉軸/輔軸/副軸的概念理解 flex 你是不是也用這個概念去理解 grid 如果你是用這種方式理解的 flex，那聽我慢慢道來 今天我打破你對 flex 的理解 打碎對 flex 理解 display: grid 和 display: flex 默認方向都是 row，為什麼他們表現出來的形式不一樣呢？ display: flex： 效果 di
昵稱 uccs
原文鏈接：一文吃透 CSS Flex 佈局 教學遊戲 這裏有兩個小遊戲，可用來練習 flex 佈局。 塔防遊戲 送小青蛙回家 Flexbox 概述 Flexbox 佈局也叫 Flex 佈局，彈性盒子佈局。 它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來，更簡便、完整、響應式地實現各種頁面佈局。 它的主要思想是使父元素能夠調整子元素的寬度、高度、排列方式，從而更
昵稱 唐志遠
在flex佈局中，定義一行三列並列的3個div，其中2個div寬度寫定，第3個div隨着父容器寬度由flex自適應。這是個很常見的佈局，平常使用沒有啥問題。 現在在第3個div中放置一段長的純文本(文本內容單行放置寬度大於第3個div的寬度)，且設置white-space: nowrap，此時就會出現第3個div的寬度被文本撐開，變為單行文本的寬度，而不受flex佈局的約束。且由於第3個div的寬
昵稱 DiracKeeko
flex無法創建滾動條 flex的孫元素使用overflow: auto無法出現滾動條 原因： 子元素沒有設置寬度，這會導致子元素的寬度由孫元素決定，從而子元素被撐大，孫元素無法達到出現滾動條的條件。 解決方案： 給子元素設置寬度，比如width:100%; flex佈局和文字溢出省略遭遇的問題 https://segmentfault.com/a/1190000045
昵稱 熱飯班長
直接設置border:1px solid #ccc;在手機下看會比設計稿粗（這裏由於是灰色可能不是那麼明顯。。。。。用紅色綠色藍色之類的粗細差異很大），瀏覽器邊框的最小的顯示像素是1px,設置0.5px也是會渲染成1px的效果，而在css的1px根據手機的品牌或型號不同在高清屏的物理像素是2像素或者3像素 div class="list-wrapper border-1px
昵稱 jiang_rong
