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

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中的用法一樣，這里就不再演示了。

?

轉載于:https://www.cnblogs.com/zqq-blog/p/10153363.html

總結

以上是生活随笔為你收集整理的CSS3 flexbox 布局 ---- flex项目属性介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。