前端基本功 響應式布局 flex

本文主要記錄一些自己遇見的flex布局案例

簡單回顧一下flex常用屬性

6個常用的容器屬性

flex-彈性布局原來如此簡單！

30 分鐘學會 flex 布局

演示：flexbox演示站

//styl,我就不給大家手動轉成css了

.main
flex 1
text-align: center
background: #3dc95d
.main-body
display: flex //關鍵
flex-wrap: wrap //關鍵
.main-item
flex-grow:1 //關鍵 基礎知識介紹過了 再來一邊 定義元素的放大比例，預設為0，即如果存在剩餘空間，也不放大。
min-width: 30% //關鍵 width: 30%跟flex-basis:30%;（flex: 0 0 30%）作用是相同的，我是這麼理解
max-width: 100% //關鍵 min-width 和 max-width 只是讓元素變得更響應而已
margin: 15px
height: 30px
border: 1px red solid
background: #ccc
text-align: center

在使用了justify-content:space-around、justify-content: center或者justify-content: space-between後有個問題，看最後一張圖最後一排，我想讓它按著順序排怎麼辦

解決方法一

// 在列表結尾增加一系列空標籤，

// 數量我覺得最好是 一行最大容量 - 1
// 因為這子元素個數可能是不確定的
//在css裡做如下定義：
//根據自己實際情況，有時候可以不新增布局上也不會有影響
.item:empty 
// 當然你也可以不用 .item這個類名，隨便換乙個
//.fix 

效果還算滿足要求

解決方法二：

.container

.item

電壓等級分布

行業分類分布
電源數量分布

// stylus

.pieitem
width: 33.333%
min-width: 400px
max-width: 50%
box-sizing: border-box
.piediv
height: 360px
&:not(:nth-child(3n))
.piediv::after
content: ''
width: 1px
position: absolute
height: 360px
top 50%
right 0
transform: translate(0, -50%)
background: #ccc
background: -webkit-gradient(radial, 0 180, 0, 0 180, 180, from(#ddd), to(rgba(0,0,0,0)))

前端基本功之居中

對於前端學習者來說，無論是學習時還是工作時，垂直居中與水平居中都是繞不開的基本功技能，對這種基本功熟捻於心間，則可以更高效的完成工作，就有更多的時間去看書學習，良性迴圈由此而來。居中一般分為垂直 vertically 居中和水平 horizontal 居中，如何居中？對於不同的元素，該分別用怎樣的方...

前端響應式布局

這段時間一直在學習前端的東西記錄一下自己所欠缺的東西！響應式布局 由於以前基本上沒有接觸前端的東西，熟悉又陌生，熟悉是因為經常聽見同事在說，陌生是因為自己沒有實踐過 查詢 查詢 剛開始我看名字以為是查詢之類的 說明 通過不同的 型別和條件定義樣式表規則。ok 我已經了基本上了解響應式布局是幹嘛的了 ...

前端之響應式布局

就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本，可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗。在標頭檔案中新增乙個meta標籤 其中，width device width 這一句的意思是讓頁面的寬度等於螢幕的寬度。rem 指的是 html 元素的 font size，ht...