css彈性佈局 --flex佈局。

CSS3 彈性盒子內容

1.寫flex屬性，前寫私有屬性。

  例如：

display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;

2.jusify-content屬性：

 

space-between：

space-between：彈性項目平均分佈在該行上。若是剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。不然第一個跟最後一個兩端對齊，中間項目距離相等。

　　

space-around：彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。若是隻有一個彈性項，則該值等同於center。不然，彈性項目沿該行分佈，且彼此間隔相等（好比是20px）
，同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。首尾兩邊距容器的距離，等於項目間隔的一半。

3.flex-wrap：子元素換行方式

nowrap - 默認， 彈性容器爲單行。該狀況下彈性子項可能會溢出容器。
wrap - 彈性容器爲多行。該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。

4.align-content:與align-items相似，不過不是設置彈性子元素的對齊，而是設置各個行的對齊。

stretch - 默認。各行將會伸展以佔用剩餘的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分佈。
space-around - 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

CSS3 彈性子元素屬性

5.order:<integer>：用整數值來定義排列順序，數值小的排在前面。能夠爲負值。

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

　　帶有class 爲 first的子元素排在第一個。

6.margin:auto; flex 佈局完美居中。

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

父元素設置 flex佈局，子元素設置margin:auto;便可實現完美居中。

7.align-self:設置彈性元素自身在側軸（縱軸）方向上的對齊方式。

 

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

 

8.flex 能夠給組件指定 flex。flex的值能夠是數字。屬性用於指定彈性子元素如何分配空間。

flex：1.表示，組件能夠撐滿父級及組件的剩餘空間。
       同時存在多個並列的子元素組件， flex：1  均分。
      若是並列的子組件的flex值不同，誰的值更大，誰佔據的空間比例更大。按比例均分。