CSS3 flexbox 布局 ---- flex項(xiàng)目屬性介紹

　　現(xiàn)在介紹用在flex項(xiàng)目上的css 屬性，html結(jié)構(gòu)還是用ul, li 結(jié)構(gòu)，不過內(nèi)容改成1,2,3, 樣式的話，直接把給 ul 設(shè)display:flex 變成flex 容器，默認(rèn)主軸的方向?yàn)樗椒较颉ndex.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; }

　　頁面展示內(nèi)容如下：

　　用在flex項(xiàng)目上的屬性總共有6個，order || flex-basis || flex-grow || flex-shrink || flex || align-self

order，顧名思議，順序的意思，就是在不改變html 結(jié)構(gòu)的情況下，給每一個flex項(xiàng)目重新排序，比如讓第一個項(xiàng)目在最后面，它的取值是一個數(shù)字，正數(shù)，負(fù)數(shù)，0 都可以，如8。 ?瀏覽器在進(jìn)行重繪時會根據(jù)這個數(shù)字對flex項(xiàng)目進(jìn)行重新排列，規(guī)則就是從小到大，哪個項(xiàng)目的order 屬性大，哪個項(xiàng)目排在后面，反之則在前面，如果有兩個flex項(xiàng)目的order值相等，就按照它們在html中定義的結(jié)構(gòu)進(jìn)行排列。當(dāng)然，每一個flex項(xiàng)目的order默認(rèn)取值是0, 表示flex項(xiàng)目會按照html 中定義的結(jié)構(gòu)進(jìn)行排列。 我們給每一個li 添加一個order 屬性，根據(jù)規(guī)則，第三個項(xiàng)目排在第一位，第二個項(xiàng)目不變，第一個項(xiàng)目排在最后。 li:nth-child(1) {order: 3; } li:nth-child(2) {order: 2; } li:nth-child(3) {order: 1; }

　　頁面的展示效果和我們預(yù)料的一致

　　flex-basis, ?在flex-shinrk 和flex-grow 屬性起作用以前，它控制每一個flex項(xiàng)目的默認(rèn)大小，flex-shrink 和 flex-grow 我們下面會說到。flex-basis 的取值： auto || <length>, ?length 就是我們平常用的一些屬性值，如px, rem.?

　　flex-basic 的默認(rèn)取值是auto, 那auto 代表什么意思呢? 如果主軸方向是水平方向(row)，它等于flex項(xiàng)目的寬度(width)。如果主軸方向是垂直方向(conlumn), 它等于flex項(xiàng)目的高度(height)。

　　flex-basis 取值為length, 表示我們可以賦值給它，如150px, ?那么它就會覆蓋掉flex項(xiàng)目原有的寬度或高度(取決于主軸的方向)。

　　我們現(xiàn)在有三個flex項(xiàng)目，且每一個flex項(xiàng)目的寬度是100px, 現(xiàn)在把第一個flex項(xiàng)目的flex-basic設(shè)為100px, 第二個flex 項(xiàng)目的flex-basis 設(shè)了200px,第三個flex項(xiàng)目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; }

　　按照理論，第三個項(xiàng)目和以前沒有什么變化，且由于第一個項(xiàng)目的flex-basis 等于100px, 它們兩個應(yīng)該一樣大，第二個項(xiàng)目flex-basis的200px, 覆蓋掉width:100px, 它比其他兩個都大。

　　flex-grow: 它指的是當(dāng)flex項(xiàng)目沒有占滿整個flex-contain 的空間時，每一個項(xiàng)目怎么變化，要不要變大去占據(jù)空間，grow 就是生長，長大的意思，它的默認(rèn)值是0，不會進(jìn)行變化，就像上圖展示的一樣。 這時我們把每一個flex項(xiàng)目的flex-grow值設(shè)為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 代表什么呢? 我們把所有的值都設(shè)為999， 它的形為和剛才設(shè)為1 沒有什么區(qū)別。

　　現(xiàn)在我們把其中一個flex項(xiàng)目，比如第二個，的flex-grow 改為2

li:nth-child(1) {flex-grow: 1; } li:nth-child(2) {flex-grow: 2; } li:nth-child(3) {flex-grow: 1; }

　　可以發(fā)現(xiàn)這個元素變大了，再改3, 它更大了

　　從這里可以看出它不是一個絕對值，而是相對值，是某個flex項(xiàng)目相對其它flex項(xiàng)目的比例。當(dāng)設(shè)置每一個項(xiàng)目的flex-grow 為1時，一共有3 個元素，整個flex-container會被分成3份，每一個flex-item 各占一份，所以都相同。如果我們其中一個flex-flow設(shè)為2. 還是3個元素，那么整個flex container 就分成1+2+1 = 4份，其余2個各1/4, 而第二個占2/4,所以第二個就相對變大了， flex-grow 設(shè)置的某個或某些項(xiàng)目相對于其他項(xiàng)目的比例。

　　flex-shrink : shrink 收縮，當(dāng)所有flex項(xiàng)目的寬度總和超過 flex-contaier容器的時候，每一個項(xiàng)目都會進(jìn)行收縮。它的默認(rèn)值是1, 表示每一個項(xiàng)目都會等比例收縮。現(xiàn)在把元素增加為6個

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

　　可以看到每一個項(xiàng)目都收縮了，但還是一樣大，這就是默認(rèn)值flex-shrink :1 起作用。

　　如果把某個元素的flex-shrink 設(shè)為0, 它就不會進(jìn)行收縮。現(xiàn)在把第一個項(xiàng)目的flex-shrink改為0，

li:nth-child(1) {flex-shrink: 0; }

　　它確實(shí)沒有收縮

　　如果把某個flex項(xiàng)目的flex-shrink設(shè)置3，和flex-grow 一樣，它也是比例，每一個flex item收縮1, 它收縮3， 它比別的項(xiàng)目收縮更嚴(yán)重。把第二個flex-shrink設(shè)置為3，

li:nth-child(1) {flex-shrink: 0; } li:nth-child(2) {flex-shrink: 3; }

　　

　　flex： 是上面三個屬性簡寫，像邊框border屬性一樣, flex: flex-grow flex-shrink flex-basis, ?根據(jù)上面的內(nèi)容，我們很輕松地就可以得出它的默認(rèn)值為0 1 auto，這和我們平時沒有設(shè)置這個屬性表現(xiàn)一致，flex-basis: auto 表示，它和元素的寬度或高度保持一致，flex-grow等于0，表示如果flex容器有剩余空間，它并不會擴(kuò)大，flex-shrink為1，如果flex容器空間不足，它會進(jìn)行收縮。注意這三個屬性的排列順序

　　現(xiàn)在我們把元素減少為2 個，

<ul><li>1</li><li>2</li> </ul>

　　然后調(diào)整一下樣式，第一個flex項(xiàng)目flex: 2 1 300px; 第二個flex項(xiàng)目 flex: 1 2 300px; flex容器ul 的寬度為632px,?正好放下這個項(xiàng)目。

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; }

　　整個效果如下，非常簡單

　　現(xiàn)在我們看一下flex-shrink是怎么工作的？當(dāng)我們把容器寬度改為422px;

ul {display: flex; width: 422px;border: 1px solid red; }

　　整個容器損失了210px(632px -422px )的空間，由于第一個元素的flex-shrink 是1， 第二個shrink是2, 所以這損失的210px，分成了3份，第一個項(xiàng)目占1份，也就是70px, 所以第一個項(xiàng)目損失了70px,寬度變?yōu)榱?00-70 =230px; 第二個項(xiàng)目占兩份，也就是140px, 所以第二個項(xiàng)目損失了140px;寬度變?yōu)榱?00-140= 160px; 打開瀏覽器的控制臺，可以看到變化的后的值。

　　flex-grow 的工作原理也是一樣，當(dāng)我們把容器寬度增大到932px;時， 它多獲得了300px的空間，每一個項(xiàng)目都會增大，由于第一個是flex-flow是2, 第二個flex-flow是1, 所以這多出來的300px, 也是分成了3份，第一個項(xiàng)目占2份，200px, 寬度增大到300+200 =500px; 第二個占1份，100px, 寬度增大到300+100 =400px;

同樣可以打開瀏覽器控制臺查看項(xiàng)目大小

　上面我們在設(shè)置flex屬性值的時候， 三個屬性都設(shè)置了，如flex: 2 1 300px; 但是如果我們只設(shè)置一個值呢，如flex: 1，它會有怎么樣的表現(xiàn)，其他省略的兩個值到底取什么值。如果三個值中省略了flex-basis, 它的取值為0. 如果省略了flex-shrink 和flex-grow, 它們的取值將會是1.

　　因?yàn)閒lex是 flex-grow flex-shrink flex-basis 的縮寫， 所以如果只寫一個且是正數(shù)的話，如flex: 5, 這個數(shù)字指的是flew-grow的取值, 省略了flex-shrink和 flex-basis, 如果flex-shrink省略，它的取值是1，flex-basis 省略，它的取值是0. flex: 5 相當(dāng)于 flex: 5 1 0; 如果寫二個,也是數(shù)字的話，如 flex: 1 1; 它們分別是flex-grow flex-shrink 的取值，flex-basis的取值省略，它的取值還是0； flex: 1 1 相當(dāng)于 flex: 1 1 0;

　　flex 簡寫形式還有幾個關(guān)鍵字： none， auto. ??flex: none ?相當(dāng)于flex: 0 0 auto, 它表示flex項(xiàng)目跟元素的寬度或高度保持一致，即不收縮也不擴(kuò)張。flex:auto相當(dāng)于flex: 1 1 auto;?

　　align-self： 它決定單個flex項(xiàng)目在側(cè)軸上怎么排列。你可以還記得 align-items，它也是決定flex項(xiàng)目在側(cè)軸上的排列，不過它是對所有flex 項(xiàng)目進(jìn)行的整體的排列, align-self 就是在這整體排列的基礎(chǔ)上，對單個項(xiàng)目的排列，它的取值為 auto || flex-start || flex-end || center || baseline || stretch; 它的默認(rèn)取值auto, 就是表示它跟align-item屬性保持一致； 如果對這個屬性進(jìn)行設(shè)置，它就會覆蓋掉align-item屬性。

　　現(xiàn)在修改一下html, 改回三個flex項(xiàng)目

<ul><li>1</li><li>2</li><li>3</li> </ul>

　　給ul設(shè)置高度，可以看出flex項(xiàng)目在側(cè)軸上的變化。

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; }

　　現(xiàn)在給第一個項(xiàng)目設(shè)置align-self 屬性flex-start，看看效果

li:nth-child(1){align-self: flex-start; }

　　可以看到第一個flex項(xiàng)目在側(cè)軸的頂部，和我們見到的flex-start 一致。

　　flex-end, 第一個項(xiàng)目到了側(cè)軸的底部，也和我們預(yù)想的一樣。

　　center: 側(cè)軸中間

　　stretch 和baseline,也和align-items中的用法一樣，這里就不再演示了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/zqq-blog/p/10153363.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。