導(dǎo)語(yǔ)
這篇文章不是彈性布局和響應(yīng)式布局的語(yǔ)法教程否过，而是小羊在學(xué)習(xí)上述兩種布局時(shí)的一點(diǎn)心得體會(huì)午笛，所以建議各位看官舍得浪費(fèi)時(shí)間看這篇文章之前，對(duì)彈性布局和響應(yīng)式布局有一定了解苗桂，如果還沒有了解药磺，我在下面一節(jié)給出我在學(xué)習(xí)時(shí)所用的學(xué)習(xí)資料，以供童鞋們借鑒煤伟；
網(wǎng)頁(yè)布局的一些小見解
以小羊目前掌握的知識(shí)范疇癌佩，網(wǎng)頁(yè)布局大致經(jīng)歷了個(gè)階段，我融入了自己的理解：
- 古典主義時(shí)期：使用table元素進(jìn)行布局便锨，當(dāng)時(shí)CSS功能特性還不是十分強(qiáng)大围辙，所以用table元素（原本是制作表格的）進(jìn)行布局，違背了HTML語(yǔ)義化的規(guī)范放案；
- 新古典主義時(shí)期：Box-Model+Position+Float實(shí)現(xiàn)布局姚建，至今仍然使用，兼容性最好吱殉；
- 現(xiàn)代主義時(shí)期：Flex布局+Responsive Design+grid掸冤，隨著移動(dòng)互聯(lián)網(wǎng)的高潮迭起催生了Flex和響應(yīng)式布局技術(shù)厘托，F(xiàn)lex比較使用與簡(jiǎn)單的線性布局，于是適應(yīng)大型網(wǎng)站開發(fā)的grid布局又應(yīng)運(yùn)而生稿湿；
- 后現(xiàn)代主義時(shí)期：待續(xù)......
網(wǎng)頁(yè)布局是們宏大精深的敘述主題铅匹，日后小羊會(huì)單獨(dú)開章節(jié)敘述；
flex布局和響應(yīng)式布局的學(xué)習(xí)資料
-
阮一峰老師的FLex布局教程
涵蓋了語(yǔ)法篇和實(shí)戰(zhàn)篇饺藤，很好的入門中文資料包斑； - Flexbox的坑
-
極簡(jiǎn)響應(yīng)式查詢
這是小羊參考MDN等學(xué)習(xí)資料的總結(jié)，摳取響應(yīng)式查詢的核心知識(shí)點(diǎn)策精，快速入門；
flex布局的一些學(xué)習(xí)筆記
相信童鞋們已經(jīng)看完阮一峰的教程崇棠，并且做了骰子demo伐憾；
但是看到那么多的屬性球化，不免頭大，小羊在此做一下不成熟的知識(shí)梳理：
- 彈性盒模型是核心，主軸是一切元素主方向的布局關(guān)鍵厕倍，交叉軸是一切元素相對(duì)于主軸的交叉方向的布局關(guān)鍵；
【注】切記主軸不一定是水平方向脂崔，使用flex-direction: column那么主軸就是垂直方向了成艘； - 總的來看，容器6個(gè)屬性哆档，項(xiàng)目也6個(gè)屬性蔽挠，剔除簡(jiǎn)寫的flex-flow和flex(初學(xué)不建議使用簡(jiǎn)寫)，也就10個(gè)屬性瓜浸；
- 和項(xiàng)目總體布局相
justify-content和align-content具有相同的屬性：
justify-content相當(dāng)于移動(dòng)每一個(gè)項(xiàng)目的交叉軸
align-content相當(dāng)于移動(dòng)同在一行項(xiàng)目的主軸
flex-start || flex-end || center || space-between || space-around || (stretch)
-
align-items和align-self都是和項(xiàng)目在交叉軸對(duì)齊方式相關(guān)澳淑，一個(gè)是一整行，一個(gè)是單個(gè)項(xiàng)目插佛；通常是容器內(nèi)只有一行元素時(shí)使用其進(jìn)行布局杠巡；
flex-start || flex-end || center || baseline || stretch
- 改變項(xiàng)目的寬度(flex-direction: column為高度)有
flex-basis、flex-grow和flex-shrink
flex-basis功能最強(qiáng)大雇寇，可設(shè)置寬度的固定值或百分比氢拥；
flex-grow: 項(xiàng)目的伸展屬性，可按比例分配項(xiàng)目空間锨侯，這一特性也可以結(jié)合響應(yīng)式媒體查詢實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)嫩海；
flex-shrink: 項(xiàng)目的縮放屬性，空間不足時(shí)是否縮放囚痴，通常使用默認(rèn)值1即可出革；
- 為項(xiàng)目排序
order，有時(shí)候在響應(yīng)式設(shè)計(jì)時(shí)需要在不同設(shè)備下微調(diào)項(xiàng)目順序渡讼，order可以較好實(shí)現(xiàn)
code -
flex-direction看后面的實(shí)例明白用處即可骂束，flex-wrap暫時(shí)沒有遇到具體業(yè)務(wù)場(chǎng)景耳璧，暫且擱置；
** 三欄布局為例**
- 利用
flex-grow動(dòng)態(tài)占據(jù)父元素空間
以往三欄布局需要設(shè)置浮動(dòng)和清除浮動(dòng)
<div class="normal-box">
<div class="normal-item">1</div>
<div class="normal-item">2</div>
<div class="normal-item">3</div>
</div>
.normal-box{
border: 1px solid ;
padding: 10px;
margin: 10px;
width: 300px;
overflow: hidden;
}
.normal-item{
box-sizing: border-box;
float: left;
width: 33.33%;
height: 50px;
border: 1px solid red;
}
去掉一個(gè)item展箱，在清除的位置會(huì)“留白”旨枯，得重新設(shè)置元素的寬度；
normal-box
使用flex-box后混驰，只要給flex-item設(shè)置flex-grow: 1的屬性攀隔，那么元素就可以動(dòng)態(tài)變寬；
<div class="flex-box">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<div class="flex-box">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
<div class="flex-box">
<div class="flex-item">1</div>
</div>
.flex-box{
border: 1px solid ;
padding: 10px;
margin: 10px;
display: flex;
width: 300px;
}
.flex-item{
flex-grow: 1;
width: 100px;
height: 50px;
border: 1px solid red;
}
flex-box
code
- 利用
flex-basis比例化分配元素寬度
上面的多欄布局栖榨，我們?yōu)樵卦O(shè)置固定寬度昆汹，實(shí)際可以通過flex-basis: x%為元素設(shè)置百分比寬度；
<div class="flex-box flex-box-1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<div class="flex-box flex-box-2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
.flex-box{
border: 1px solid ;
padding: 10px;
margin: 10px;
display: flex;
width: 600px;
}
.flex-item{
width: 100px;
height: 50px;
border: 1px solid red;
}
.flex-box-1{
.flex-item:first-child{
flex-basis: 20%;
}
.flex-item:nth-child(2){
flex-basis: 60%
}
.flex-item:last-child{
flex-basis: 20%;
}
}
.flex-box-2{
.flex-item:first-child{
flex-basis: 50%;
}
.flex-item:last-child{
flex-basis: 50%;
}
}
- 利用
flex-direction實(shí)現(xiàn)元素的響應(yīng)式布局
用過Bootstap框架的童鞋都知道婴栽，nav組件有一行布局和堆疊布局兩種满粗，可以利用flex-direction的特性實(shí)現(xiàn)這種效果；
<div class="flex-box flex-box-1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
.flex-box{
border: 1px solid ;
padding: 10px;
margin: 10px;
display: flex;
flex-warp: wrap;
}
.flex-item{
flex-basis: 33.33%;
height: 50px;
border: 1px solid red;
}
@media (max-width:768px){
.flex-box{
flex-direction: column;
}
}
響應(yīng)式媒體查詢的一些心得
響應(yīng)式媒體查詢無(wú)非就是條件樣式語(yǔ)句愚争，怎么理解映皆？
@media (min-width:768px) and (max-width: 992px){
//條件樣式...
}
就是在不同設(shè)備條件（寬度或高度，設(shè)備類型轰枝，擺放方向等）去設(shè)置特定樣式捅彻；
總結(jié)：
- 關(guān)于flex語(yǔ)法可以歸納為10個(gè)屬性；
- justify-content和align-content可以改變項(xiàng)目的主軸或交叉軸的位置鞍陨；
- align-items和align-self可以改變一行項(xiàng)目或單個(gè)項(xiàng)目在交叉軸的對(duì)齊方式步淹；
- flex-basis、flex-grow和flex-shrink可以改變項(xiàng)目的尺寸诚撵；
- order改變項(xiàng)目的排序贤旷；
- flex-direction改變項(xiàng)目組的方向，flex-wrap定義是否換行砾脑；
- 響應(yīng)式媒體查詢無(wú)非就是設(shè)定條件樣式幼驶；
