就看運氣了

flexible box 彈性布局

1.開始flex布局

所有元素都支持flex布局

.box{
  display: flex;
}

行內元素flex布局

.box{
  display: inline-flex;
}

webkit內核瀏覽器

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

常規布局方法使用的float，clear，vertical-align屬性在flex中將失效。

2.為容器元素添加flex屬性

容器元素即display為flex的元素，通過為其設置容器屬性可以控制其子元素的布局表現。

2.1）flex-direction

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

　  設置子元素排列方向：水平 | 水平反向 | 垂直 | 垂直反向（默認水平row）

2.2）flex-wrap

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

　　設置子元素超出一行的換行表現：不換行（被壓縮）| 換行 | 換行翻轉（即排滿的一行在下，超出換行的在上）（默認不換行）

2.3）flex-flow

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

　　這是flex-direction和flex-wrap屬性的縮寫方式。

2.4）justify-content

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

　　設置子元素在主方向上的對齊方式（主方向即flex-direction設置的方向）（可看做文字對齊的text-align屬性）

　　靠前對齊（即方向為row時靠左，方向為column時靠上） | 靠后對齊 | 居中對齊 | 分散對齊（子元素左右貼邊，剩余空間平均分配） | 平均對齊（所有子元素左右margin相等平均分配剩余空間） （默認flex-start）

2.5）align-items

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

　　設置子元素在主方向的垂直方向的對齊方式（可看做文字對齊的vertical-align屬性）

　　靠前對齊 | 靠后對齊 | 居中對齊 | 基于元素內首行文字的基線對齊 | 拉伸（子元素在垂直方向拉伸填滿父元素）（默認flex-start）

2.6）align-content

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

　　設置多行子元素在主方向垂直方向上的對齊方式，有多行子元素時使用，一行時無效

　　靠前對齊（即方向為row時靠左，方向為column時靠上） | 靠后對齊 | 居中對齊 | 分散對齊（子元素上下貼邊，剩余空間平均分配） | 平均對齊（所有行上下margin相等平均分配剩余空間）| 拉伸（所有行平均分配空間，拉伸占滿父元素） （默認flex-start）

3.為子元素添加flex屬性

3.1）order

.item {
  order: <int>;
}

　　設置子元素排列序號，小的在前，默認為0，支持負數

3.2）flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

　　設置子元素放大比例，默認為0，即父元素存在剩余空間也不放大

　　放大比例相對而言，數字越大所占空間越大

3.3）flex-shrink

.item {
  flex-shrink: <number>; /* default 1 */
}

　　設置子元素縮小比例，默認為1，即空間不足時按比例縮小。不支持負數

3.4）flex-basis

.item {
  flex-basis: <length> | auto; /* default auto */
}

　　設置父元素在分配多余空間之前，子元素在主方向上所占空間大小（可設置為width值，即占據固定空間），默認auto

3.5）flex

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

　　flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

　　該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

　　建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

3.6）align-self

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

　　單獨設置該元素的align-items屬性，使之與其他兄弟元素不同，默認auto，即繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

該隨筆參考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 用來鞏固知識的，想更直觀了解flex布局可直接進入網址，里面圖文并茂還有英文原版參考文章（baidu flex 第一條就是）。

（over）