flex學習
flex-direction屬性:主軸方向，即專案的排列方向
flex-wrap屬性:用來定義主軸上一行或一列排列不下的換行方式
flex-flow屬性:屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
justify-content屬性:定義了專案在主軸上的對齊方式
align-item屬性:專案在交叉軸上如何對齊（即與主軸的垂直方向）
align-content屬性:定義了多根軸線（多行）的對齊方式。如果專案只有一根軸線，該屬性不起作用。
order屬性:定義專案的排列順序 數值越小排列越靠前預設為0
flex-grow屬性：專案的放大比例，預設為0，即如果存在剩餘空間也不放大
flex-shrink屬性:專案的縮小比例
flex-basis屬性:在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex屬性:是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
align-self屬性:允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
雙欄一靜一動
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
flextitle
>
head
>
>
.container
.header,
.footer
.main
.aside
.content
style
>
>
class
="container"
>
class
="header"
>
div>
class
="main"
>
class
="aside"
>
div>
class
="content"
>
div>
div>
class
="footer"
>
div>
div>
body
>
html
>
>
>
charset
="utf-8"
/>
>
csstitle
>
head
>
type
="text/css"
>
*.main>div
.left
.right
.middle
.content
style
>
>
class
="main"
>
class
="middle"
>
class
="content"
>
中間div
>
div>
class
="left"
>
左邊div
>
class
="right"
>
右邊div
>
div>
body
>
html
>
>
>
charset
="utf-8"
/>
>
csstitle
>
head
>
type
="text/css"
>
body
*.header , .footer
.footer
.main
.left , .center , .right
.center
.left
.right
style
>
>
class
="header"
>
頭部div
>
class
="main"
>
class
="center"
>
中間中間中間中間中間中間中間後div
>
class
="left"
>
左邊div
>
class
="right"
>
右邊div
>
div>
class
="footer"
>
底部div
>
body
>
html
>
flex布局及相關屬性
flex direction屬性，決定主軸的方向 即專案的排列方向 box flex wrap屬性，預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定義，如果一條軸線排不下，如何換行。box flex flow屬性，flex flow屬性是flex direction屬性和fle...
前端知識之flex布局2
當軸線超過一條時,flex容器把多條軸線當做元素對待,可以進行對齊 stretch 預設 當元素寬度沒有設定,軸線可以拉伸 flex start 向左對齊 flex end 向右對齊 center 居中對齊 space between 兩端對齊,元素之間空白等比切分 space around 軸線兩...
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...