CSS 盒模型是網(wǎng)頁(yè)設(shè)計(jì)的布局中經(jīng)常用到的模型，很好的了解模型對(duì)網(wǎng)頁(yè)的布局有非常大的幫助；CSS3 讓網(wǎng)頁(yè)能夠符合多種平臺(tái)，讓網(wǎng)頁(yè)更加的彈性推出了 Flex 布局畸冲。
盒模型
盒模型一直在網(wǎng)頁(yè)設(shè)計(jì)中非常流行，現(xiàn)在的前端工程師對(duì)盒模型的了解程度越來(lái)越高观腊，我們?cè)谥匦禄仡櫼幌潞心Ｐ偷木瑁?/p>
//CSS
.box {
height: 100px;
width: 100px;
margin: 20px;
padding: 10px;
border: 1px solid #000;
background-color: #ccc;
}
當(dāng)然不同的 display 屬性下的盒模型是不一樣的邑闲，上圖為display:block情況下的盒模型，當(dāng)在display:inline梧油、display:table-cell等情況下需要另外考慮苫耸。
flex
CSS3 新增了display:flex，它使得網(wǎng)頁(yè)更加彈性適合各種不同的屏幕儡陨，它的思想是讓容器有能力讓其子項(xiàng)目能夠改變其寬度褪子、高度甚至是順序，以最佳的方式填充可用空間骗村，當(dāng)然這種不可預(yù)知的布局會(huì)讓頁(yè)面缺乏靈活性嫌褪。
概念
設(shè)置了display:flex的元素稱為彈性容器，它的所有子元素將稱為flex item（彈性項(xiàng)目）胚股。注意：設(shè)置了 flex 布局以后渔扎，子元素的float、clear和vertical-align屬性將失敗信轿。
- main axis：水平軸主軸
- cross axis：垂直交叉軸
- main start：主軸的開始位置
- main end：主軸的結(jié)束位置
- cross start：交叉軸的開始位置
- cross end：交叉軸的結(jié)束位置
- main size：?jiǎn)蝹€(gè)彈性項(xiàng)目占據(jù)的主軸
- cross size：?jiǎn)蝹€(gè)彈性項(xiàng)目占據(jù)的交叉軸
容器的屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
它決定了主軸的方向晃痴，就是彈性項(xiàng)目的方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap
它來(lái)設(shè)置項(xiàng)目如何換行，默認(rèn)情況下項(xiàng)目都在一條軸線上
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow
它是flex-direction和flex-wrap的簡(jiǎn)寫财忽，默認(rèn)值為：row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
它來(lái)設(shè)置項(xiàng)目在主軸上的對(duì)齊方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items
它來(lái)設(shè)置項(xiàng)目在交叉軸上的對(duì)齊方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content
它定義了多根軸線的對(duì)齊方式倘核。如果項(xiàng)目只有一根軸線，該屬性不起作用即彪。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
彈性項(xiàng)目的屬性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
它是用來(lái)定義項(xiàng)目的排列順序紧唱，數(shù)字越小，排列靠前隶校，默認(rèn)為0漏益。
.item {
order: 1;
}
flex-grow
這個(gè)屬性是用來(lái)設(shè)置項(xiàng)目的放大比例，默認(rèn)為0深胳，即如果存在剩余空間也不放大绰疤；如果說(shuō)有的項(xiàng)目的flex-grow屬性都為1，那么它們會(huì)均分剩余的空間舞终，如果一個(gè)項(xiàng)目的flex-grow屬性為2轻庆，其他項(xiàng)目都為1，則為2的占據(jù)的剩余空間將比其他項(xiàng)多一倍敛劝。
.item {
flex-grow: 1;
}
flex-shrink
這個(gè)屬性是用來(lái)設(shè)置項(xiàng)目的縮小比例余爆，默認(rèn)1，如果空間不足夸盟，則該項(xiàng)目縮卸攴健；如果一個(gè)項(xiàng)目的flex-shrink的屬性為0上陕，其它為1桩砰，則空間不足時(shí)，前者不縮小唆垃。
.item {
flex-shrink: 1;
}
flex-basis
這個(gè)屬性定義了在分配多余空間前五芝，項(xiàng)目占據(jù)的主軸空間，它的默認(rèn)值為auto辕万，即項(xiàng)目本來(lái)的大小枢步。
.item {
flex-basis: 200px;
}
flex
它是屬性flex-grow、flex-shrink和flex-basis的簡(jiǎn)寫渐尿，默認(rèn)值為0 1 auto醉途，后兩個(gè)屬性為可選項(xiàng)。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}
align-self
它是用來(lái)設(shè)置單個(gè)項(xiàng)目的在交叉軸上的對(duì)齊方式砖茸，它會(huì)覆蓋align-items屬性的值隘擎，默認(rèn)值為auto，即繼承了父級(jí)元素的align-items屬性凉夯。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
