作者：楊耿

https://www.cnblogs.com/yanggeng/p/11212526.html

彈性盒子(伸縮盒)

注意，本篇會很長，非常長， 因為彈性盒子的知識點比較多

搜索 彈性盒子的屬性? ctrl + F? ?如果覺得圖太小， ctrl + +鍵

主要的屬性有：? (主要分兩部分講， 一部分講 設(shè)置在父元素上的屬性，一部分講 設(shè)置在子元素上的屬性， 還有最后一些簡單的應(yīng)用)

　　flex

　　flex-grow

　　flex-shrink

　　flex-basis

　　flex-direction

　　flex-wrap

　　align-content

　　align-items

　　align-self

　　justify-content

　　order

設(shè)置彈性盒子的屬性：

　　display：flex ?? inline-flex ?(這兩者的區(qū)別就是， 一個是 block ??一個是 inline-block)

首先要注意的是：

　　你給父元素設(shè)置了 display：flex ?子元素們并不會改變成內(nèi)聯(lián)元素。? 雖然他們的效果看起來是， 但是實際上并不會改變。該是啥，還是啥

接下來來看一下，他的效果，及屬性和應(yīng)用：

　　首先，display: flex ?是設(shè)置在 父元素上面的，設(shè)置之后， 他里面的子元素，就會變成 彈性盒子了。(有些人，把父元素叫做盒子，把里面的子元素叫做 項目)

接下來，幾個屬性， 都是設(shè)置在 父元素上面的：↓??

　　flex: direction

?設(shè)置主軸的方向。默認的主軸是 橫向 的，從左到右排列，另一條軸叫做 交叉軸，? 也就是我們理解的縱向，

參數(shù)：

　　row：默認值，主軸橫向的，從左向右排列

　　row-reverse：主軸還是橫向的，只是里面項目的 排列方式不一樣， 是從右向左的。

　　column：把主軸變成 縱向的，排列方式 也就變成了，從上向下

　　column-reverse：主軸變成 縱向的，排列方式顛倒， 從下向上排列。

　　flex-wrap：設(shè)置，子元素溢出，是否換行。

參數(shù)：

　　nowrap：默認值(也就是不換行。子元素如果的寬? 大于父元素的，會壓縮子元素)? 把所有子元素排列在一行

　　wrap：子元素溢出，會換行，變成多行的形式

　　wrap-reverse：顛倒 wrap 的排列方式 (也會變成多行的形式)

　　justify-content:

設(shè)置橫軸(橫向)的對齊方式

參數(shù)：

　　flex-start：默認值 對齊起始位置，第一個子元素的起始位置，然后其他子元素向它看齊

　　flex-end：跟上面相反的，也就是說，人家對齊在開始，這個對齊在 最后面

　　center：居中對齊

　　space-between：如果有多余的空間，就會平均分布，每個子元素的 兩邊空白空間保持一致(頭尾的子元素貼邊)

　　space-around：如果有多余的空間，就會平均分布，每個子元素的 兩邊空白空間保持一致(頭尾的子元素不會貼邊)

　　align-items:?

設(shè)置(縱軸)縱向的對齊方式：(單行)

參數(shù)：

　　?flex-start：默認值 對齊起始位置

　　flex-end：跟上面相反的，也就是說，人家對齊在起始位置，這個對齊在 最下面

　　center：居中對齊

　　baseline:? ?基線對齊

　　stretch:? ?如果沒有設(shè)置子元素高度，那么全部子元素的高度都會被拉伸

既然學(xué)了縱向 和? 橫向的對齊方式， 那么現(xiàn)在就用他來設(shè)置 一下，我們平常的 居中功能

我們平常設(shè)置居中， 是不是要設(shè)置 position：然后就left ?calc ?50% - 去子元素的 寬一半，? 然后再去計算 top？? 很麻煩對吧。?

看看以下的方法，是不是簡單了許多

　　align-content:

align-content 跟上面的 align-items 的區(qū)別就是，一個是操作單行的，一個是操作多行的。? 參數(shù)都是一樣的設(shè)置， 除了多了兩個?space-betwwen? ，space-around? ?

設(shè)置縱向的對齊方式(多行)

參數(shù)：

　　flex-start：

　　flex-end：

　　center：??

　　space-betwwen??

　　space-around? ?

　　stretch

接下來的幾個屬性，都是設(shè)置在 子元素上的

　? align-self：

單獨設(shè)置對齊方式。如果父元素有設(shè)置 align-items的話， 會被子元素給替代掉，也就是，align-self 和 align-items同時設(shè)置, 會采用子元素的align-self 對齊方式

但是，如果是? align-self 和 align-content 同時設(shè)置， 會采用 父元素的 align-content的 對齊方式

參數(shù)：

　　auto：默認值，也就是遵從 父元素 align-items 的對齊方式。

　　flex-start：對齊起始位置

　　flex-end：跟上面相反的，也就是說，人家對齊在起始位置，這個對齊在 最下面

　　center：居中對齊

　　baseline:? ?基線對齊

　　stretch:? ?如果沒有設(shè)置子元素高度，那么全部子元素的高度都會被拉伸

　　order：

設(shè)置數(shù)值，來決定他們的排列順序

參數(shù)：

　　0：默認值

　　數(shù)值越小，越靠前? 支持負數(shù)(-1)

　　flex-grow:

設(shè)置數(shù)值來 自定義 擴展的比例，(不支持負值)

參數(shù)：

　　默認值：0 (也就是，不用擴展)

　　flex-shrink: (flex-shrink的真實計算公式)

設(shè)置子元素們的寬加起來大于 父元素寬時，要怎么壓縮 成一行，

參數(shù)：

　　1：默認值(超出的話，就按照 比例1 壓縮)

學(xué)了上面的那個 grow之后， 是不是覺得，他的計算公式那么簡單， 那么跟他對應(yīng)的 shrink 計算公式也一樣？其實不是的，他的計算公式，有點冷門，乃至于w3c 都沒有公式，那么多他的計算公式怎么樣呢？看下面的例子吧~

?還有最后一點，這也是最冷門的知識點。flex-shrink 參與計算的不是盒子的寬， 而是內(nèi)容區(qū)的寬， border 和? padding 都不用加進去計算的。只計算content

　　flex-basis：(如果使用了flex-direction 改變了主軸的方向，那么他控制的，就變成了高度。不是寬度，也就是說，橫向控制寬度，縱向控制高度)

如果這個屬性呢， flex-basis: 100px ?你這樣設(shè)置，他跟 width: 100px的效果是一樣的。?

其實把，flex-basis 和 width 兩個一起設(shè)置，是有用意的。flex-basis 是決定了 元素寬度的 最小值， width，是決定了元素寬度可撐開的 最大值。

還有最后的一個值：

　　flex：

他是 flex-grow? flex-shrink flex-basis 的縮寫形式

　　flex：1 ?1 ?20%；

代表的是，可以伸縮，該元素的最小寬度是 20%。

我們來利用，今天的全部內(nèi)容來實現(xiàn)幾個案例。

　　第一個：居中

　　　　第二個：幾等分。

　　第三個：其中一個固定寬度的布局

　　第四個：浮動

有人可能會問， float 不好嗎？? emmm 確實不好， 因為 父級會受浮動流的影響，而且會觸發(fā)bfc 等等。

　　第五個: 圣杯布局

精彩推薦

• Java學(xué)習(xí)路線圖！！！

• Java1234 VIP特價！！！

• 鋒哥帶你java從入門到上班！！！

長按關(guān)注鋒哥微信公眾號，非常感謝；

總結(jié)

以上是生活随笔為你收集整理的ul弹性怎么一行显示_css3系列之弹性盒子 flex的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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