box-sizing
box-sizing: content-box;寬高只是內容的寬高，加入邊框和內邊距向外擴張
box-sizing: border-box;寬高是總盒子的寬高，加入邊框和內邊距向內壓縮。
flex布局
採用flex布局的元素，成為flex容器
.box
flex容器的所有子元素自動成為容器成員，稱為flex專案，孫子元素並不是。
flex容器有主軸和交叉軸，專案預設為主軸排列。
1.display屬性
display 屬性決定是否使用flex布局
.box
flex：將物件作為彈性伸縮盒顯示
inline-flex：將物件作為內聯塊級彈性伸縮盒顯示
2.flex-direction 屬性
flex-direction 屬性決定主軸的方向（即專案的排列方向）
.box
3、flex-wrap 屬性
預設情況下，專案都排在一條線（又稱"軸線"）上
flex-wrap 屬性定義，如果一條軸線排不下，如何換行
.box
4、flex-flow
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，預設值為 row nowrap
.box
5、justify-content 屬性
justify-content 屬性定義了專案在主軸上的對齊方式
.box
6、align-items 屬性
align-items 屬性定義專案在交叉軸上如何對齊
.box
7、align-content 屬性
align-content 屬性定義了多根軸線（多行）在交叉軸上的對齊方式
如果專案只有一根軸線（一行），該屬性不起作用
.box
flex布局筆記1（基本概念與容器的屬性）
網頁布局的傳統解決方案為盒子模型，依賴於display position float屬性。這種解決方案的缺點是對於特殊布局的實現比較麻煩，如元素的垂直居中。2009年w3c提出flex布局 flexible box 即彈性布局。任何乙個元素都可以作為彈性布局的容器。設為flex布局以後，子元素的fl...
grid布局基本概念整理
回顧一下web頁面布局的歷程，於我個人而言，經歷了最開始的學習計算機程式設計時的table布局和基礎的div css布局，再到後來的flex彈性盒布局。div css布局給web頁面布局帶來了更多可能，解決了table布局的侷限性。頁面是以 的自上而下的文件流的形式呈現的，所以div css的浮動解...
Flexbox布局的基本概念
flex容器是flex元素的的父元素。通過設定display屬性的值為flex或inline flex定義。注舊版本的屬性值 flex容器的每乙個子元素均為乙個flex子元素。注意 felx容器直接包含的文字變為匿名的彈性子元素。注意 flexbox布局和原來的布局是2套概念，所以部分css屬性在f...