css3的flex布局用法
任何乙個容器都可以指定為flex布局；
行內元素也可以使用flex布局。
.box
webkit核心的瀏覽器，必須加上-webkit字首
.box
設為flex布局後，子元素的float、clear、和vertical-align屬性將失效。
基本概念：
採用css3 flex布局的元素,稱為flex容器，它的所有子元素自動稱為容器成員，稱為(flex item)
容器預設存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫main start,結束位置叫做 main end；交叉抽的開始位置叫做cross start,結束位置叫做cross end;
容器的6個屬性：
flex-directio:
決定主軸的方向（即專案排列的方向）
用法：.box
row:預設值 水平從左向右 row-reverse:水平從右向左 column:豎直從上往下 column-reverse：豎直從下往上
flex-wrap:
預設情況下專案都排在一條（軸線）線上,flex-warp屬性定義，如果一條軸線排不下，如何換行。
用法：.box
nowrap:預設不換行 wrap：換行，第一行在上 wrap -reverse：換行，第一行在下方
flex-flow:
flex-flow屬性是flex-direction屬性和flex- wrap屬性的簡寫形式，預設值是row no wrap。
用法.box
justify-content:
定義了專案在主軸的對齊方式
用法：.box
flex-start:左對齊 flex-end:右對齊 center:居中 space-between:兩端對齊，專案之間的間隔都相等 space-around: 每個專案兩側的間隔相等，所以，專案之間的間隔比專案與邊框的間隔大一倍
align-items:
定義專案在交叉上如何對齊
用法： . box
它可能取5個值，具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下
flex-start:交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center:交叉軸中點對齊
baseline:專案中第一行文字的基線對齊
stretch（預設值）：如果專案未設定高度或者為auto，將佔滿整個容器的高度
align-content
定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
用法：.box
flex-start:與交叉軸起點對齊
flex-end:與交叉軸終點對齊
center：與交叉軸中點對齊
space-between:與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around:每根軸線兩側的間隔都相等，所以，軸線之間的間隔與邊框的間隔大一倍
stretch(預設):軸線佔滿整個交叉軸
專案的6個屬性:
order:
定義專案的排列順序，數值越小，排列越靠前，預設為0
用法: . item
flex-grow
定義專案的放大比例，預設為0，如果存在剩餘空間，也不放大
用法 ：.item
flex-shrink
定義了專案的縮小比例，預設為1，即如果控制項不足，該專案將縮小
用法：.item
flex-basis
定義了在分配多餘控制項之前，專案佔據的主軸控制項(main size).瀏覽器根據這個屬性,計算主軸是否有多餘控制項,它的預設值是auto,即專案的本來大小.
用法：.item
它可以設為跟width或height屬性一樣的值(比如350px)，則專案將佔據固定控制項
flex
屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為 0 1 auto;後兩個屬性可選
用法： . item
該屬性有兩個快捷值： auto(1 1 auto)和none(0 0 auto)
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值
align-self:
允許單個專案與其他專案不一樣的對齊方式，可覆蓋align-items屬性，預設值是auto，表示繼承父類元素的align-items屬性，如果沒有父元素，則等同於stretch。
用法 ：.item
doctype html>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>flex box
title
>
<
style
>
.flex-container
.flex-item
.flex-item1
.flex-item3
.flex-item4
.flex-item5
.flex-item6
.flex-item:hover
style
>
head
>
<
body
>
<
div
class
="flex-container"
>
<
div
class
="flex-item flex-item1"
>flex item 1
div>
<
div
class
="flex-item flex-item2"
>flex item 2
div>
<
div
class
="flex-item flex-item3"
>flex item 3
div>
<
div
class
="flex-item flex-item4"
>flex item 4
div>
<
div
class
="flex-item flex-item5"
>flex item 5
div>
<
div
class
="flex-item flex-item6"
>flex item 6
div>
div>
body
>
html
>
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...
CSS3 Flex 彈性模型布局用法
檢視 css某個屬性，相容情況 css3 flex布局 盒子模型 box sizing border box 預設 content box 平時普通盒子模型，padding，border，盒子會變大,向外擴充套件 border box 盒子模型，padding,border,盒子模型不變大,向內擴充...