資訊專欄INFORMATION COLUMN
摘要：屬性定義了多根軸線的對齊方式。負值對該屬性無效。屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。
本文主要記錄一些自己遇見的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，則前者占據(jù)的剩余空間將比其他項多一倍。)flex：1 等價于 flex-grow: 1
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。(如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。)
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。(它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。)
order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
關(guān)于更詳細的基礎(chǔ)知識，放幾個我收藏的鏈接吧
Flex-彈性布局原來如此簡單！
30 分鐘學會 Flex 布局
演示：Flexbox演示站
1.上中下布局，中間自適應(yīng)header：height = 100px conent：height = auto
.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 有啥區(qū)別
text-align: center;
background: #3dc95d;
}
.footer{
height: 100px;
background: #fc430b;
}
2.實現(xiàn)多個元素寬度平分父級,且可配置一行最多展示多少個元素
conent：height = auto 1234567
//styl,我就不給大家手動轉(zhuǎn)成css了
.main
flex 1
text-align: center
background: #3dc95d
.main-body
display: flex //關(guān)鍵
flex-wrap: wrap //關(guān)鍵
.main-item
flex-grow:1 //關(guān)鍵 基礎(chǔ)知識介紹過了 再來一邊 定義元素的放大比例，默認為0，即如果存在剩余空間，也不放大。
min-width: 30% //關(guān)鍵 width: 30%跟flex-basis:30%;（flex: 0 0 30%）作用是相同的，我是這么理解
max-width: 100% //關(guān)鍵 min-width 和 max-width 只是讓元素變得更響應(yīng)而已
margin: 15px
height: 30px
border: 1px red solid
background: #ccc
text-align: center
完全響應(yīng)式的，你可以改變游覽器窗口的寬度，也可以改變.main-item個數(shù)
思路來源：記工作中遇到一件...
3.圣杯布局conent：height = auto header：height = 100px
.flexContainer{
display:flex;
height:100vh;
}
.footer{
width:50px;
background #CCC
}
.main{
flex-grow:1;
background #3dc95d
}
.header{
width 150px;
background #665aa4
order:-1;//使得order處于最左側(cè)(html中main寫在了最前，以利于優(yōu)先加載主內(nèi)容區(qū))
}
4.每行間距均勻分配，并自動換行的列表項
123456
.container{
display: flex;
justify-content: space-around; //使主軸方向的多余空間平均分配在兩兩item之間
flex-wrap: wrap; // 子元素每行填滿時會自動換行
}
.item{
width: 30%; //（絕大多數(shù)情況）同 flex: 0 0 30%;
min-width: 400px; // 每一個子元素最小寬度
max-width: 420px; // 每一個子元素最大寬度
min-height: 360px;
}
在使用了justify-content:space-around、justify-content: center 或者 justify-content: space-between后有個問題，看最后一張圖最后一排，我想讓它按著順序排怎么辦
解決方法一
// 在列表結(jié)尾增加一系列空標簽，
// 數(shù)量我覺得最好是 一行最大容量 - 1
// 因為這子元素個數(shù)可能是不確定的
//在css里做如下定義：
//根據(jù)自己實際情況，有時候可以不添加布局上也不會有影響
.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;
}
這種方法也能實現(xiàn)響應(yīng)式，但是如果你.item的子元素的寬度不能小于或大與某個固定寬度，換句話說就是設(shè)置min-width或max-width就會出現(xiàn)不能均勻沾滿一行的情況
這是目前我知道的兩種好用的方法，根據(jù)自己的實際情況選擇吧，如果你有idea歡迎留言討論
5.每個區(qū)塊之間用豎線分割，如圖電壓等級分布行業(yè)分類分布電源數(shù)量分布
// 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(#ffffd), to(rgba(0,0,0,0)))
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117227.html
摘要：今日繼續(xù)響應(yīng)式網(wǎng)頁布局的實現(xiàn)，采用方案。有經(jīng)驗的前端或多或少已經(jīng)接觸過這個網(wǎng)站，因為它經(jīng)常出現(xiàn)在搜索結(jié)果的前幾項。因此我想做一系列的影片專門介紹這些。 今日繼續(xù)W3Schools響應(yīng)式網(wǎng)頁布局的實現(xiàn)，采用Flexbox方案。使用Flexbox實現(xiàn)響應(yīng)式網(wǎng)頁布局是目前最流行的做法。如果你對Flexbox并不熟悉，可以查看W3Schools的教學： W3Schools Flexbox教學...
閱讀 1113·2021-11-22 14:56
閱讀 1576·2019-08-30 15:55
閱讀 3410·2019-08-30 15:45
閱讀 1681·2019-08-30 13:03
閱讀 2896·2019-08-29 18:47
閱讀 3366·2019-08-29 11:09
閱讀 2671·2019-08-26 18:36
閱讀 2640·2019-08-26 13:55
