flex方向由flex-direction特性決定,用於定義彈性布局模式。flex-direction共有4種模式：從左向右、從右向左、從上往下、從下往上。
主軸
主軸的起點與終點定義了容器元素的開始和結束邊緣。
交叉軸
交叉軸的起點與終點定義了容器的頂部與底部。
從左向右：flex-direction:row
主軸：水平方向；交叉軸：垂直方向。
從右向左：flex-direction:row-reverse（flex-direction:row的反向）
從上往下：flex-direction: column
主軸：垂直方向；交叉軸：水平方向。
從下往上 ： flex-direction: column-reverse（flex-direction: column反向）
注意：flexbox彈性布局不存在高、寬、水平、垂直等屬性值。盒子模型的大小終於由瀏覽器計算得到。flexbox不會自己換行的，空間不夠會自動伸縮。
doctype html>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
* .flexbox-row
.box
.flexbox-column
.flexbox-row-reverse
.flexbox-column-reverse
style
>
head
>
<
body
>
<
div
class
="flexbox-row"
>
<
div
class
="box"
style
="background-color:coral;"
>a
div>
<
div
class
="box"
style
="background-color:lightblue;"
>b
div>
<
div
class
="box"
style
="background-color:khaki;"
>c
div>
<
div
class
="box"
style
="background-color:pink;"
>d
div>
<
div
class
="box"
style
="background-color:lightgrey;"
>e
div>
<
div
class
="box"
style
="background-color:lightgreen;"
>f
div>
div>
<
div
class
="flexbox-column"
>
<
div
class
="box"
style
="background-color:coral;"
>a
div>
<
div
class
="box"
style
="background-color:lightblue;"
>b
div>
<
div
class
="box"
style
="background-color:khaki;"
>c
div>
<
div
class
="box"
style
="background-color:pink;"
>d
div>
<
div
class
="box"
style
="background-color:lightgrey;"
>e
div>
<
div
class
="box"
style
="background-color:lightgreen;"
>f
div>
div>
<
div
class
="flexbox-row"
>
div>
<
div
class
="flexbox-row-reverse"
>
<
div
class
="box"
style
="background-color:coral;"
>a
div>
<
div
class
="box"
style
="background-color:lightblue;"
>b
div>
<
div
class
="box"
style
="background-color:khaki;"
>c
div>
<
div
class
="box"
style
="background-color:pink;"
>d
div>
<
div
class
="box"
style
="background-color:lightgrey;"
>e
div>
<
div
class
="box"
style
="background-color:lightgreen;"
>f
div>
div>
<
div
class
="flexbox-column-reverse"
>
<
div
class
="box"
style
="background-color:coral;"
>a
div>
<
div
class
="box"
style
="background-color:lightblue;"
>b
div>
<
div
class
="box"
style
="background-color:khaki;"
>c
div>
<
div
class
="box"
style
="background-color:pink;"
>d
div>
<
div
class
="box"
style
="background-color:lightgrey;"
>e
div>
<
div
class
="box"
style
="background-color:lightgreen;"
>f
div>
div>
body
>
html
>
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...
Flex布局 彈性布局
1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...