CSS flex waterfall layout https://github.com/YoneChen/waterfall-flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ CSS masonry ...

今天做一個小實戰，需要讓一個登錄框始終保持水平和垂直居中，第一個想到的就是通過定位（要想讓一個div居中，采用定位可以解決，示例）， 然后開始接觸flex布局，學完感覺真的好用，現把知識點記錄一下，以便自己日后查看（學習教程：阮大師的教程），筆記開始： 傳統的布局：圍繞盒子模型（border ...

　　Flex布局的容器是一個伸縮容器，首先容器本身會更具容器中的元素動態設置自身大小；然后當Flex容器被應用一個大小時（width和height），將會自動調整容器中的元素適應新大小。Flex容器也可以設置伸縮比例和固定寬度，還可以設置容器中元素的排列方向（橫向和縱向）和是否支持元素的自動換行 ...

CSS3(5)---伸縮布局 有關頁面布局之前寫過三篇相關文章： 1、CSS(5)---盒子模型 2、CSS(6)---浮動(float) 3、CSS(8)---定位(position) 一、什么是Flex 布局 1、Flex 布局特點 上面三種布局都是基於盒狀 ...

盒子變成彈性盒子 display:flex; 彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成 flex容器 flex布局圖 flex六個屬性 1.flex-direction 決定主軸的方向 flex ...

flex 基本概念 　　flex布局（flex是flexible box的縮寫）， 也稱為彈性盒模型 。將屬性和屬性值（display:flex; ）寫在哪個標簽樣式中，誰就是 容器；它的所有子元素自動成為容器成員，稱為項目。 當一個元素的display 取值為flex，所有項目(子元素)會在 ...

CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-slice font-family: system-ui; See ...

vue /deep/ global css & scoped style All in One ::v-deep & /deep/ refs https://vue-loader.vuejs.org/guide ...