CSS3 flexbox 佈局 ---- flex專案屬性介紹 CSS3 flexbox 佈局 ---- flex專案屬性介紹
CSS3 flexbox 佈局 ---- flex專案屬性介紹
現在介紹用在flex專案上的css 屬性，html結構還是用ul, li 結構，不過內容改成1,2,3, 樣式的話，直接把給 ul 設display:flex 變成flex 容器，預設主軸的方向為水平方向。index.html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
index.css
ul {
display: flex;
width: 600px;
border: 1px solid red;
}
li {
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
text-align: center;
line-height: 100px;
background-color: #8cacea;
}
頁面展示內容如下：
用在flex專案上的屬性總共有6個，order || flex-basis || flex-grow || flex-shrink || flex || align-self
li:nth-child(1) {
order: 3;
}
li:nth-child(2) {
order: 2;
}
li:nth-child(3) {
order: 1;
}
頁面的展示效果和我們預料的一致
flex-basis, 在flex-shinrk 和flex-grow 屬性起作用以前，它控制每一個flex專案的預設大小，flex-shrink 和 flex-grow 我們下面會說到。flex-basis 的取值： auto || <length>, length 就是我們平常用的一些屬性值，如px, rem.
flex-basic 的預設取值是auto, 那auto 代表什麼意思呢? 如果主軸方向是水平方向(row)，它等於flex專案的寬度(width)。如果主軸方向是垂直方向(conlumn), 它等於flex專案的高度(height)。
flex-basis 取值為length, 表示我們可以賦值給它，如150px, 那麼它就會覆蓋掉flex專案原有的寬度或高度(取決於主軸的方向)。
我們現在有三個flex專案，且每一個flex專案的寬度是100px, 現在把第一個flex專案的flex-basic設為100px, 第二個flex 專案的flex-basis 設了200px,第三個flex專案flex-basis: auto 作為參考，
li:nth-child(1) {
flex-basis: 100px;
background: yellow;
}
li:nth-child(2) {
background: red;
flex-basis: 200px;
}
li:nth-child(3) {
flex-basis: auto;
}
按照理論，第三個專案和以前沒有什麼變化，且由於第一個專案的flex-basis 等於100px, 它們兩個應該一樣大，第二個專案flex-basis的200px, 覆蓋掉width:100px, 它比其他兩個都大。
flex-grow: 它指的是當flex專案沒有佔滿整個flex-contain 的空間時，每一個專案怎麼變化，要不要變大去佔據空間，grow 就是生長，長大的意思，它的預設值是0，不會進行變化，就像上圖展示的一樣。 這時我們把每一個flex專案的flex-grow值設為1,
li:nth-child(1) {
flex-grow: 1;
}
li:nth-child(2) {
flex-grow: 1;
}
li:nth-child(3) {
flex-grow: 1;
}
可以看到它佔滿了整個flex container的空間，flex-grow 的值覆蓋了width的值。 那麼這個屬性值1 代表什麼呢? 我們把所有的值都設為999， 它的形為和剛才設為1 沒有什麼區別。
現在我們把其中一個flex專案，比如第二個，的flex-grow 改為2
li:nth-child(1) {
flex-grow: 1;
}
li:nth-child(2) {
flex-grow: 2;
}
li:nth-child(3) {
flex-grow: 1;
}
可以發現這個元素變大了，再改3, 它更大了
從這裡可以看出它不是一個絕對值，而是相對值，是某個flex專案相對其它flex專案的比例。當設定每一個專案的flex-grow 為1時，一共有3 個元素，整個flex-container會被分成3份，每一個flex-item 各佔一份，所以都相同。如果我們其中一個flex-flow設為2. 還是3個元素，那麼整個flex container 就分成1+2+1 = 4份，其餘2個各1/4, 而第二個佔2/4,所以第二個就相對變大了， flex-grow 設定的某個或某些專案相對於其他專案的比例。
flex-shrink : shrink 收縮，當所有flex專案的寬度總和超過 flex-contaier容器的時候，每一個專案都會進行收縮。它的預設值是1, 表示每一個專案都會等比例收縮。現在把元素增加為6個
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
可以看到每一個專案都收縮了，但還是一樣大，這就是預設值flex-shrink :1 起作用。
如果把某個元素的flex-shrink 設為0, 它就不會進行收縮。現在把第一個專案的flex-shrink改為0，
li:nth-child(1) {
flex-shrink: 0;
}
它確實沒有收縮
如果把某個flex專案的flex-shrink設定3，和flex-grow 一樣，它也是比例，每一個flex item收縮1, 它收縮3， 它比別的專案收縮更嚴重。把第二個flex-shrink設定為3，
li:nth-child(1) {
flex-shrink: 0;
}
li:nth-child(2) {
flex-shrink: 3;
}
flex： 是上面三個屬性簡寫，像邊框border屬性一樣, flex: flex-grow flex-shrink flex-basis, 根據上面的內容，我們很輕鬆地就可以得出它的預設值為0 1 auto，這和我們平時沒有設定這個屬性表現一致，flex-basis: auto 表示，它和元素的寬度或高度保持一致，flex-grow等於0，表示如果flex容器有剩餘空間，它並不會擴大，flex-shrink為1，如果flex容器空間不足，它會進行收縮。注意這三個屬性的排列順序
現在我們把元素減少為2 個，
<ul>
<li>1</li>
<li>2</li>
</ul>
然後調整一下樣式，第一個flex專案flex: 2 1 300px; 第二個flex專案 flex: 1 2 300px; flex容器ul 的寬度為632px, 正好放下這個專案。
ul {
display: flex;
width: 632px;
border: 1px solid red;
}
li {
height: 100px;
margin: 8px;
text-align: center;
line-height: 100px;
}
li:nth-child(1) {
flex: 2 1 300px;
background: yellow;
}
li:nth-child(2) {
flex: 1 2 300px;
background: red;
}
整個效果如下，非常簡單
現在我們看一下flex-shrink是怎麼工作的？當我們把容器寬度改為422px;
ul {
display: flex;
width: 422px;
border: 1px solid red;
}
整個容器損失了210px(632px -422px )的空間，由於第一個元素的flex-shrink 是1， 第二個shrink是2, 所以這損失的210px，分成了3份，第一個專案佔1份，也就是70px, 所以第一個專案損失了70px,寬度變為了300-70 =230px; 第二個專案佔兩份，也就是140px, 所以第二個專案損失了140px;寬度變為了300-140= 160px; 開啟瀏覽器的控制檯，可以看到變化的後的值。
flex-grow 的工作原理也是一樣，當我們把容器寬度增大到932px;時， 它多獲得了300px的空間，每一個專案都會增大，由於第一個是flex-flow是2, 第二個flex-flow是1, 所以這多出來的300px, 也是分成了3份，第一個專案佔2份，200px, 寬度增大到300+200 =500px; 第二個佔1份，100px, 寬度增大到300+100 =400px;
同樣可以開啟瀏覽器控制檯檢視專案大小
上面我們在設定flex屬性值的時候， 三個屬性都設定了，如flex: 2 1 300px; 但是如果我們只設置一個值呢，如flex: 1，它會有怎麼樣的表現，其他省略的兩個值到底取什麼值。如果三個值中省略了flex-basis, 它的取值為0. 如果省略了flex-shrink 和flex-grow, 它們的取值將會是1.
因為flex是 flex-grow flex-shrink flex-basis 的縮寫， 所以如果只寫一個且是正數的話，如flex: 5, 這個數字指的是flew-grow的取值, 省略了flex-shrink和 flex-basis, 如果flex-shrink省略，它的取值是1，flex-basis 省略，它的取值是0. flex: 5 相當於 flex: 5 1 0; 如果寫二個,也是數字的話，如 flex: 1 1; 它們分別是flex-grow flex-shrink 的取值，flex-basis的取值省略，它的取值還是0； flex: 1 1 相當於 flex: 1 1 0;
flex 簡寫形式還有幾個關鍵字： none， auto. flex: none 相當於flex: 0 0 auto, 它表示flex專案跟元素的寬度或高度保持一致，即不收縮也不擴張。flex:auto相當於flex: 1 1 auto;
align-self： 它決定單個flex專案在側軸上怎麼排列。你可以還記得 align-items，它也是決定flex專案在側軸上的排列，不過它是對所有flex 專案進行的整體的排列, align-self 就是在這整體排列的基礎上，對單個專案的排列，它的取值為 auto || flex-start || flex-end || center || baseline || stretch; 它的預設取值auto, 就是表示它跟align-item屬性保持一致； 如果對這個屬性進行設定，它就會覆蓋掉align-item屬性。
現在修改一下html, 改回三個flex專案
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
給ul設定高度，可以看出flex專案在側軸上的變化。
ul {
display: flex;
justify-content: space-around;
width: 600px;
height: 300px;
border: 1px solid red;
}
li {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #8cacea;
}
現在給第一個專案設定align-self 屬性flex-start，看看效果
li:nth-child(1){
align-self: flex-start;
}
可以看到第一個flex專案在側軸的頂部，和我們見到的flex-start 一致。
flex-end, 第一個專案到了側軸的底部，也和我們預想的一樣。
center: 側軸中間
stretch 和baseline,也和align-items中的用法一樣，這裡就不再演示了。
現在介紹用在flex專案上的css 屬性，html結構還是用ul, li 結構，不過內容改成1,2,3, 樣式的話，直接把給 ul 設display:flex 變成flex 容器，預設主軸的方向為水平方向。index.html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
index.css
ul {
display: flex;
width: 600px;
border: 1px solid red;
}
li {
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
text-align: center;
line-height: 100px;
background-color: #8cacea;
}
頁面展示內容如下：
用在flex專案上的屬性總共有6個，order || flex-basis || flex-grow || flex-shrink || flex || align-self
order，顧名思議，順序的意思，就是在不改變html 結構的情況下，給每一個flex專案重新排序，比如讓第一個專案在最後面，它的取值是一個數字，正數，負數，0 都可以，如8。 瀏覽器在進行重繪時會根據這個數字對flex專案進行重新排列，規則就是從小到大，哪個專案的order 屬性大，哪個專案排在後面，反之則在前面，如果有兩個flex專案的order值相等，就按照它們在html中定義的結構進行排列。當然，每一個flex專案的order預設取值是0, 表示flex專案會按照html 中定義的結構進行排列。 我們給每一個li 新增一個order 屬性，根據規則，第三個專案排在第一位，第二個專案不變，第一個專案排在最後。
li:nth-child(1) {
order: 3;
}
li:nth-child(2) {
order: 2;
}
li:nth-child(3) {
order: 1;
}
頁面的展示效果和我們預料的一致
flex-basis, 在flex-shinrk 和flex-grow 屬性起作用以前，它控制每一個flex專案的預設大小，flex-shrink 和 flex-grow 我們下面會說到。flex-basis 的取值： auto || <length>, length 就是我們平常用的一些屬性值，如px, rem.
flex-basic 的預設取值是auto, 那auto 代表什麼意思呢? 如果主軸方向是水平方向(row)，它等於flex專案的寬度(width)。如果主軸方向是垂直方向(conlumn), 它等於flex專案的高度(height)。
flex-basis 取值為length, 表示我們可以賦值給它，如150px, 那麼它就會覆蓋掉flex專案原有的寬度或高度(取決於主軸的方向)。
我們現在有三個flex專案，且每一個flex專案的寬度是100px, 現在把第一個flex專案的flex-basic設為100px, 第二個flex 專案的flex-basis 設了200px,第三個flex專案flex-basis: auto 作為參考，
li:nth-child(1) {
flex-basis: 100px;
background: yellow;
}
li:nth-child(2) {
background: red;
flex-basis: 200px;
}
li:nth-child(3) {
flex-basis: auto;
}
按照理論，第三個專案和以前沒有什麼變化，且由於第一個專案的flex-basis 等於100px, 它們兩個應該一樣大，第二個專案flex-basis的200px, 覆蓋掉width:100px, 它比其他兩個都大。
flex-grow: 它指的是當flex專案沒有佔滿整個flex-contain 的空間時，每一個專案怎麼變化，要不要變大去佔據空間，grow 就是生長，長大的意思，它的預設值是0，不會進行變化，就像上圖展示的一樣。 這時我們把每一個flex專案的flex-grow值設為1,
li:nth-child(1) {
flex-grow: 1;
}
li:nth-child(2) {
flex-grow: 1;
}
li:nth-child(3) {
flex-grow: 1;
}
可以看到它佔滿了整個flex container的空間，flex-grow 的值覆蓋了width的值。 那麼這個屬性值1 代表什麼呢? 我們把所有的值都設為999， 它的形為和剛才設為1 沒有什麼區別。
現在我們把其中一個flex專案，比如第二個，的flex-grow 改為2
li:nth-child(1) {
flex-grow: 1;
}
li:nth-child(2) {
flex-grow: 2;
}
li:nth-child(3) {
flex-grow: 1;
}
可以發現這個元素變大了，再改3, 它更大了
從這裡可以看出它不是一個絕對值，而是相對值，是某個flex專案相對其它flex專案的比例。當設定每一個專案的flex-grow 為1時，一共有3 個元素，整個flex-container會被分成3份，每一個flex-item 各佔一份，所以都相同。如果我們其中一個flex-flow設為2. 還是3個元素，那麼整個flex container 就分成1+2+1 = 4份，其餘2個各1/4, 而第二個佔2/4,所以第二個就相對變大了， flex-grow 設定的某個或某些專案相對於其他專案的比例。
flex-shrink : shrink 收縮，當所有flex專案的寬度總和超過 flex-contaier容器的時候，每一個專案都會進行收縮。它的預設值是1, 表示每一個專案都會等比例收縮。現在把元素增加為6個
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
可以看到每一個專案都收縮了，但還是一樣大，這就是預設值flex-shrink :1 起作用。
如果把某個元素的flex-shrink 設為0, 它就不會進行收縮。現在把第一個專案的flex-shrink改為0，
li:nth-child(1) {
flex-shrink: 0;
}
它確實沒有收縮
如果把某個flex專案的flex-shrink設定3，和flex-grow 一樣，它也是比例，每一個flex item收縮1, 它收縮3， 它比別的專案收縮更嚴重。把第二個flex-shrink設定為3，
li:nth-child(1) {
flex-shrink: 0;
}
li:nth-child(2) {
flex-shrink: 3;
}
flex： 是上面三個屬性簡寫，像邊框border屬性一樣, flex: flex-grow flex-shrink flex-basis, 根據上面的內容，我們很輕鬆地就可以得出它的預設值為0 1 auto，這和我們平時沒有設定這個屬性表現一致，flex-basis: auto 表示，它和元素的寬度或高度保持一致，flex-grow等於0，表示如果flex容器有剩餘空間，它並不會擴大，flex-shrink為1，如果flex容器空間不足，它會進行收縮。注意這三個屬性的排列順序
現在我們把元素減少為2 個，
<ul>
<li>1</li>
<li>2</li>
</ul>
然後調整一下樣式，第一個flex專案flex: 2 1 300px; 第二個flex專案 flex: 1 2 300px; flex容器ul 的寬度為632px, 正好放下這個專案。
ul {
display: flex;
width: 632px;
border: 1px solid red;
}
li {
height: 100px;
margin: 8px;
text-align: center;
line-height: 100px;
}
li:nth-child(1) {
flex: 2 1 300px;
background: yellow;
}
li:nth-child(2) {
flex: 1 2 300px;
background: red;
}
整個效果如下，非常簡單
現在我們看一下flex-shrink是怎麼工作的？當我們把容器寬度改為422px;
ul {
display: flex;
width: 422px;
border: 1px solid red;
}
整個容器損失了210px(632px -422px )的空間，由於第一個元素的flex-shrink 是1， 第二個shrink是2, 所以這損失的210px，分成了3份，第一個專案佔1份，也就是70px, 所以第一個專案損失了70px,寬度變為了300-70 =230px; 第二個專案佔兩份，也就是140px, 所以第二個專案損失了140px;寬度變為了300-140= 160px; 開啟瀏覽器的控制檯，可以看到變化的後的值。
flex-grow 的工作原理也是一樣，當我們把容器寬度增大到932px;時， 它多獲得了300px的空間，每一個專案都會增大，由於第一個是flex-flow是2, 第二個flex-flow是1, 所以這多出來的300px, 也是分成了3份，第一個專案佔2份，200px, 寬度增大到300+200 =500px; 第二個佔1份，100px, 寬度增大到300+100 =400px;
同樣可以開啟瀏覽器控制檯檢視專案大小
上面我們在設定flex屬性值的時候， 三個屬性都設定了，如flex: 2 1 300px; 但是如果我們只設置一個值呢，如flex: 1，它會有怎麼樣的表現，其他省略的兩個值到底取什麼值。如果三個值中省略了flex-basis, 它的取值為0. 如果省略了flex-shrink 和flex-grow, 它們的取值將會是1.
因為flex是 flex-grow flex-shrink flex-basis 的縮寫， 所以如果只寫一個且是正數的話，如flex: 5, 這個數字指的是flew-grow的取值, 省略了flex-shrink和 flex-basis, 如果flex-shrink省略，它的取值是1，flex-basis 省略，它的取值是0. flex: 5 相當於 flex: 5 1 0; 如果寫二個,也是數字的話，如 flex: 1 1; 它們分別是flex-grow flex-shrink 的取值，flex-basis的取值省略，它的取值還是0； flex: 1 1 相當於 flex: 1 1 0;
flex 簡寫形式還有幾個關鍵字： none， auto. flex: none 相當於flex: 0 0 auto, 它表示flex專案跟元素的寬度或高度保持一致，即不收縮也不擴張。flex:auto相當於flex: 1 1 auto;
align-self： 它決定單個flex專案在側軸上怎麼排列。你可以還記得 align-items，它也是決定flex專案在側軸上的排列，不過它是對所有flex 專案進行的整體的排列, align-self 就是在這整體排列的基礎上，對單個專案的排列，它的取值為 auto || flex-start || flex-end || center || baseline || stretch; 它的預設取值auto, 就是表示它跟align-item屬性保持一致； 如果對這個屬性進行設定，它就會覆蓋掉align-item屬性。
現在修改一下html, 改回三個flex專案
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
給ul設定高度，可以看出flex專案在側軸上的變化。
ul {
display: flex;
justify-content: space-around;
width: 600px;
height: 300px;
border: 1px solid red;
}
li {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #8cacea;
}
現在給第一個專案設定align-self 屬性flex-start，看看效果
li:nth-child(1){
align-self: flex-start;
}
可以看到第一個flex專案在側軸的頂部，和我們見到的flex-start 一致。
flex-end, 第一個專案到了側軸的底部，也和我們預想的一樣。
center: 側軸中間
stretch 和baseline,也和align-items中的用法一樣，這裡就不再演示了。