檢視 css某個屬性，相容情況
css3 flex布局
盒子模型
box-sizing:border-box;
預設: content-box 平時普通盒子模型，padding，border， 盒子會變大,向外擴充套件
border-box 盒子模型，padding,border, 盒子模型不變大,向內擴充套件
calc(公式) 注意: + - * /
calc(100px-20px) ×
calc(100px - 20px) √
***********************************==
flex布局
父級:display:flex;
新增瀏覽器字首: -webkit- ,真實工作，postcss外掛程式
display:-webkit-box;
* 如果用了彈性布局，子元素，不需要浮動 float
父級身上其他屬性:
justify-content:子元素水平排列方式
center 居中 √
space-between 兩端對齊 √
space-around 子元素分散排列 √
flex-start 居左
flex-end 居右
align-items:子元素垂直排列
center 居中
flex-end 底部
flex-start 開始
align-content 多行的時候，垂直排列
center 居中
..flex-direction: 排列方式
row 橫向排列
row-reverse 橫向翻過排列
column 縱向排列
column-reverse 縱向翻過排列
flex-wrap:子元素是否在一行顯示
nowrap 不換行
wrap 換行
flex-flow:
子級身上屬性:
flex:11 指的是乙個係數 √
* 子元素在劃分父元素寬度，先刨除固定寬度
align-self 其實就是用來覆蓋父級 align-items 垂直排列
flex-grow: 1; 定義子元素放大比例
order: 規定子元素順序，排序
數值越小，越靠前
預設值0
CSS3 flex彈性布局
css3的flex布局用法 任何乙個容器都可以指定為flex布局 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首 box 設為flex布局後，子元素的float clear 和vertical align屬性將失效。基本概念 採用css3 flex布局的...
CSS3 flex 彈性布局
為盒子模型提供最大的靈活性 基本概念 設定了 flex 布局的元素稱為 flex container 容器 所有子元素稱為 flex ite 專案 容器屬性 flex wrap 換行 預設情況下專案都排在一條線上，如果超出容器，則減少專案寬度，該屬性定義如何換行 flex flow 是 flex d...
CSS3 flex彈性布局之flex屬性
flex 大致分為兩類屬性 容器屬性和專案屬性 容器內部專案的屬性 flex 屬性 flex 1 如就給容器內部專案設定的屬性。這裡的 wrap 指容器，item 我們稱作專案。我們還需要知道flex屬性是flex grow,flex shrink和flex basis的簡寫，預設值為0 1 aut...