CSS3 Flex Box 彈性盒子、彈性布局

1. 概要

Flexible Box翻譯過來就是彈性盒子、彈性布局，是css3中新增的一種布局方式，是當頁面需要适應不同的螢幕大小以及裝置類型時確定元素擁有恰當的行為的布局方式。引入彈性布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和配置設定空白空間。

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

屬性	描述
display	指定 HTML 元素盒子類型。
flex-direction	指定了彈性容器中子元素的排列方式
justify-content	設定彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items	設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap	設定彈性盒子的子元素超出父容器時是否換行。
align-content	修改 flex-wrap 屬性的行為，類似align-items, 但不是設定子元素對齊，而是設定行對齊
flex-flow	flex-direction 和 flex-wrap 的簡寫
order	設定彈性盒子的子元素排列順序。
align-self	在彈性子元素上使用。覆寫容器的 align-items 屬性。
flex	設定彈性盒子的子元素如何配置設定空間。

内容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的橫軸（主軸線，main axis）對齊。

·justify-content

文法：

justify-content: flex-start | flex-end | center | space-between | space-around

可選項：

flex-start：彈性項目向行頭緊挨着填充。這個是預設值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
flex-end：彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
center：彈性項目居中緊挨着填充。（如果剩餘的***空間是負的，則彈性項目将在兩個方向上同時溢出）。
space-between：彈性項目平均分布在該行上。如果剩餘空間為負或者隻有一個彈性項，則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分布在該行上，相鄰項目的間隔相等。
space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者隻有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

align-items 設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

align-items

文法

align-items: flex-start | flex-end | center | baseline | stretch

可選項：

flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行内軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值将參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

flex-wrap 屬性用于指定彈性盒子的子元素換行方式。

文法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

可選項:

align-content

屬性用于修改 flex-wrap 屬性的行為。類似于 align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。

文法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各個值解析:

使用彈性盒子，居中變的很簡單，隻想要設定 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中:

如

.flex-item {
    width: 100px;
    height: 100px;
    margin: auto;
}

align-self 屬性用于設定彈性元素自身在側軸（縱軸）方向上的對齊方式。

選項：

auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行内軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值将參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

---------------- END ----------------

======================