前言
時(shí)代在進(jìn)步吠撮，人對(duì)美也有了更高的追求，對(duì)于物品的追求不再是簡(jiǎn)簡(jiǎn)單單的實(shí)用就行柬姚，對(duì)美觀也是有所要求拟杉。web網(wǎng)站也是如此，當(dāng)我們用不同的設(shè)備訪問(wèn)一個(gè)網(wǎng)站時(shí)量承，我們是希望網(wǎng)站呈現(xiàn)出的東西跟我的設(shè)備剛剛匹配搬设，頁(yè)面的排版、字體的大小撕捍、模板的布局就專(zhuān)門(mén)針對(duì)這個(gè)設(shè)備開(kāi)發(fā)的APP一樣拿穴。但是終端設(shè)備種類(lèi)如此之多，如果針對(duì)一個(gè)設(shè)備就開(kāi)發(fā)一種頁(yè)面忧风，那么程序員就不單單是頭禿了默色。所以，響應(yīng)式頁(yè)面布局就來(lái)了狮腿。
正文
今天就從CSS3引入的box-sizing和Flex布局下手腿宰。
盒子模型
上面就是一個(gè)盒子模型，下面是它的實(shí)現(xiàn)代碼
div {
width: 200px;
height: 200px;
border: 5px solid #ccc;
padding: 20px;
margin: 20px;
}
我們最初設(shè)置這個(gè)div的寬高是200x200缘厢，但當(dāng)我們?cè)O(shè)置padding和border以后卻發(fā)現(xiàn)這個(gè)div實(shí)際的寬高變成了250x250,這樣就有一個(gè)問(wèn)題吃度，在開(kāi)發(fā)的過(guò)程必須要計(jì)算它的寬高，另外當(dāng)開(kāi)發(fā)一個(gè)響應(yīng)式頁(yè)面的時(shí)候贴硫，我們可能需要設(shè)置兩個(gè)div的寬度都為50%椿每，但是這個(gè)div有padding和border的時(shí)候，50%加50%再加上padding/border就大于整個(gè)頁(yè)面的寬度夜畴，這不是我們所希望的結(jié)果拖刃。
為了解決上面的問(wèn)題删壮，CSS3引入了box-sizing屬性
box-sizing
box-sizing: content-box|border-box|inherit;
再看一下上面的圖贪绘，這個(gè)圖就跟個(gè)城市規(guī)劃圖一樣，有4個(gè)環(huán)央碟，一環(huán)是content環(huán)税灌，二環(huán)是padding環(huán),三環(huán)是border環(huán)，四環(huán)是margin環(huán)亿虽，于是box-sizing的兩個(gè)屬性就對(duì)應(yīng)圖中的一環(huán)和三環(huán)菱涤。（二環(huán)屬性被廢棄了，四環(huán)屬性還沒(méi)生出來(lái)）
content-box其實(shí)就一個(gè)值border-box洛勉，其他兩個(gè)并沒(méi)什么用粘秆。當(dāng)設(shè)置為border-box時(shí)，width/height屬性設(shè)置的其實(shí)是三環(huán)的大小收毫，而不是一環(huán)的大小攻走，也就是說(shuō)設(shè)置的寬高包含了padding殷勘、border、content
當(dāng)我們?cè)谏厦娴拇a中加一句
box-sizing: border-box;
就變成了這樣
它的一環(huán)content自適應(yīng)變成了150
Flex布局
基本的概念圖就不搞了昔搂，看的人一頭霧水玲销，圖盲一枚
Flex容器
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
上面的代碼的html結(jié)構(gòu)中，container就是容器摘符，當(dāng)設(shè)置display:flex時(shí)贤斜，它就變成了一個(gè)Flex容器，此時(shí)它的所有子項(xiàng)（item）的float逛裤、clear瘩绒、vertical-align就失效了。
有六種屬性可以設(shè)置在Flex容器上别凹，作用于它的子項(xiàng)item
-
flex-direction: row | row-reverse | column | column-reverse
子項(xiàng)的排列順序：橫向 | 橫向（從右向左）| 豎向 | 豎向（從下向上） -
flex-wrap: nowrap | wrap | wrap-reverse;
子項(xiàng)超出容器寬度是否換行：不換 | 換 | 換行（換行后第二行在第一行的上面） -
flex-flow: <flex-direction> || <flex-wrap>;
集合屬性草讶，沒(méi)卵用，過(guò) -
justify-content: flex-start | flex-end | center | space-between | space-around;
子項(xiàng)對(duì)齊方式：左對(duì)齊 | 右對(duì)齊 | 居中 | 兩端對(duì)齊炉菲，項(xiàng)目之間有相等間隔 | 平分容器的寬度 -
align-items: flex-start | flex-end | center | baseline | stretch;
子項(xiàng)的垂直對(duì)齊：上對(duì)齊 | 下對(duì)齊 | 居中對(duì)齊 | 文字對(duì)齊 | 默認(rèn)值（如未設(shè)置高度堕战，會(huì)占滿(mǎn)容器的高度） -
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
這個(gè)屬性跟justify-content相似，含義是軸線(xiàn)的豎向?qū)R方式拍霜，首先flex-wrap得設(shè)為為wrap嘱丢，假如container寬度僅能容下兩個(gè)item,那么兩個(gè)item就在一根軸線(xiàn)上，那么上面代碼中就存在三根軸線(xiàn)祠饺。這樣以軸線(xiàn)為基本單位的實(shí)現(xiàn)方法就跟justify-content一致了越驻，只不過(guò)一個(gè)在橫向，一個(gè)在豎向道偷。
子項(xiàng)item也有幾個(gè)屬性
-
order: <integer>
子項(xiàng)的順序缀旁，數(shù)值越大越靠后，默認(rèn)值0 -
flex-basis: <length> | auto
當(dāng)設(shè)置這個(gè)屬性以后勺鸦，width屬性就不起作用了并巍，它的值可以是px也可以是% -
flex-grow: <number>
項(xiàng)目的放大比例，默認(rèn)值時(shí)0换途，當(dāng)它的值不為0時(shí)懊渡，子項(xiàng)會(huì)等比放大填充滿(mǎn)整個(gè)容器。同時(shí)這個(gè)屬性也會(huì)覆蓋width军拟，flex-grow得值越大剃执，其對(duì)應(yīng)的子項(xiàng)寬度也越大
只有一個(gè)子項(xiàng)設(shè)置
flex-grow后，它會(huì)填充容器所有的剩余空間
-
flex-shrink: <number>
項(xiàng)目的縮小比例懈息，默認(rèn)值1肾档，當(dāng)容器的寬度較小的時(shí)候，默認(rèn)所有子項(xiàng)都要等比縮小的，但是當(dāng)flex-shrink設(shè)置為0得時(shí)候怒见，所有子項(xiàng)就會(huì)一直保持原來(lái)尺寸不變
只有一個(gè)子項(xiàng)設(shè)置
flex-shrink為0的時(shí)候戒祠，其他子項(xiàng)會(huì)自動(dòng)縮小，但它扔會(huì)保持原來(lái)尺寸
-
flex: none | [<'flex-grow'><'flex-shrink'>? || <'flex-basis'>]
234屬性其實(shí)都有一個(gè)共性速种，就是當(dāng)某一個(gè)子項(xiàng)設(shè)置這三個(gè)屬性值與其他子項(xiàng)不一致時(shí)姜盈，都會(huì)導(dǎo)致該子項(xiàng)的寬度與其他不一致，而且三個(gè)屬性值設(shè)置不同時(shí)還會(huì)沖突配阵，因此三個(gè)屬性集合出來(lái)一個(gè)屬性flex
.item { flex : 0; }
// 相當(dāng)于
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
算了馏颂，集合屬性變換多端，還是分開(kāi)寫(xiě)吧棋傍。
-
align-self: flex-start | flex-end | center | baseline | stretch;
這個(gè)屬性跟容器的align-items一個(gè)東西救拉，當(dāng)子項(xiàng)設(shè)置align-self的時(shí)候會(huì)覆蓋容器的align-items屬性。
基礎(chǔ)理論學(xué)習(xí)完畢瘫拣，多實(shí)戰(zhàn)練習(xí)亿絮，收工。麸拄。派昧。
