本文主要記錄一些自己遇見的flex佈局案例
簡單回顧一下flex常用屬性
6個常用的容器屬性
- flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值爲row nowrap。
- flex-direction屬性決定主軸的方向(即項目的排列方向)
- flex-wrap默認情況下,項目都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
- justify-content屬性定義了項目在主軸上的對齊方式。
- align-items屬性定義項目在交叉軸上如何對齊。
- align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
6個常用的元素屬性
- flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值爲0 1 auto。後兩個屬性可選。(如果所有項目的flex-grow屬性都爲1,則它們將等分剩餘空間(如果有的話)。如果一個項目的flex-grow屬性爲2,其他項目都爲1,則前者佔據的剩餘空間將比其他項多一倍。)
flex:1
等價於flex-grow: 1
- flex-grow屬性定義項目的放大比例,默認爲0,即如果存在剩餘空間,也不放大。
- flex-shrink屬性定義了項目的縮小比例,默認爲1,即如果空間不足,該項目將縮小。(如果所有項目的flex-shrink屬性都爲1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性爲0,其他項目都爲1,則空間不足時,前者不縮小。負值對該屬性無效。)
- flex-basis屬性定義了在分配多餘空間之前,項目佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的默認值爲auto,即項目的本來大小。(它可以設爲跟width或height屬性一樣的值(比如350px),則項目將佔據固定空間。)
- order屬性定義項目的排列順序。數值越小,排列越靠前,默認爲0。
- align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值爲auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。
關於更詳細的基礎知識,放幾個我收藏的鏈接吧
演示:Flexbox演示站
1.上中下佈局,中間自適應
<div class="flexContainer">
<header class="header">header:height = 100px</header>
<main class="main">conent:height = auto</main>
<footer class="footer">footer:height = 100px</footer>
</div>
.flexContainer{
display: flex;
height: 100%; //要指定高度
flex-direction: column; //佈局從上到下排列
}
.header,.footer{
font-size: 18px;
display: flex; // 這是是爲居中 文字的
justify-content: center; // 文字 水平居中
align-items: center; // 文字垂直居中
}
.header{
height: 100px;
background: #665aa4;
}
.main{
flex-grow: 1; // 不知道和 flex: 1 有啥區別
text-align: center;
background: #3dc95d;
}
.footer{
height: 100px;
background: #fc430b;
}
2.實現多個元素寬度平分父級,且可配置一行最多展示多少個元素
<main class="main">
conent:height = auto
<div class="main-body">
<div class="main-item">1</div>
<div class="main-item">2</div>
<div class="main-item">3</div>
<div class="main-item">4</div>
<div class="main-item">5</div>
<div class="main-item">6</div>
<div class="main-item">7</div>
</div>
</main>
//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
完全響應式的,你可以改變遊覽器窗口的寬度,也可以改變.main-item
個數
思路來源:記工作中遇到一件...
3.聖盃佈局
<div class="flexContainer">
<main class="main">conent:height = auto</main>
<header class="header">header:height = 100px</header>
<footer class="footer">footer:height = 100px</footer>
</div>
.flexContainer{
display:flex;
height:100vh;
}
.footer{
width:50px;
background #CCC
}
.main{
flex-grow:1;
background #3dc95d
}
.header{
width 150px;
background #665aa4
order:-1;//使得order處於最左側(html中main寫在了最前,以利於優先加載主內容區)
}
4.每行間距均勻分配,並自動換行的列表項
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.container{
display: flex;
justify-content: space-around; //使主軸方向的多餘空間平均分配在兩兩item之間
flex-wrap: wrap; // 子元素每行填滿時會自動換行
}
.item{
width: 30%; //(絕大多數情況)同 flex: 0 0 30%;
min-width: 400px; // 每一個子元素最小寬度
max-width: 420px; // 每一個子元素最大寬度
min-height: 360px;
}
在使用了justify-content:space-around
、justify-content: center
或者 justify-content: space-between
後有個問題,看最後一張圖最後一排,我想讓它按着順序排怎麼辦
解決方法一
// 在列表結尾增加一系列空標籤,
// 數量我覺得最好是 一行最大容量 - 1
// 因爲這子元素個數可能是不確定的
<div class="item"></div>
<div class="item"></div>
//在css裏做如下定義:
//根據自己實際情況,有時候可以不添加布局上也不會有影響
.item:empty {
height: 0;
min-height: 0px; // 當然要記得把這些元素重置
border: none; // 這些
padding: 0.......
}
// 當然你也可以不用 .item這個類名,隨便換一個
//.fix {
// width: 30.333333%;
// height:0;
// margin: 0;
//}
缺點就是加了額外空標籤
效果還算滿足要求
解決方法二:
.container{
display: flex;
flex-wrap: wrap;
background: red;
}
.item{
box-sizing: border-box;
width: 30.333333%;
margin: 10px 1.5%;
background:#eee;
height: 120px;
}
這種方法也能實現響應式,但是如果你.item
的子元素的寬度不能小於或大與某個固定寬度,換句話說就是設置min-width
或max-width
就會出現不能均勻沾滿一行的情況
這是目前我知道的兩種好用的方法,根據自己的實際情況選擇吧,如果你有idea歡迎留言討論
5.每個區塊之間用豎線分割,如圖
<!--html 結構-->
<!--電壓等級分佈-->
<div class="pieItem">
<div class="pieTitle">
<span>
電壓等級分佈
</span>
</div>
<!--餅圖-->
<div class="pieDiv" id="voltageLevel"></div>
</div>
<!--行業分類分佈-->
<div class="pieItem">
<div class="pieTitle">
<span>
行業分類分佈
</span>
</div>
<!--餅圖-->
<div class="pieDiv" id="category"></div>
</div>
<!--電源數量分佈-->
<div class="pieItem">
<div class="pieTitle">
<span>
電源數量分佈
</span>
</div>
<!--餅圖-->
<div class="pieDiv" id="powerSupply"></div>
</div>
// 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)))