淺談Flex布局與縮放比例計(jì)算

發(fā)布時(shí)間：2020-06-04 16:18:28 作者：JS_Even_JS

這篇文章主要介紹了淺談Flex布局與縮放比例計(jì)算，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、Flex 布局簡(jiǎn)介

Flex 是 Flexible Box 的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。

任何一個(gè)容器都可以指定為 Flex 布局，也就是說(shuō)，行內(nèi)元素也可以設(shè)置成Flex 布局。

// 將塊級(jí)元素div設(shè)置為flex布局
div {
    display: flex;
}

// 將行內(nèi)元素span設(shè)置為flex布局
span {
    display: flex;
}

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。

二、Flex布局的默認(rèn)特性

默認(rèn)情況下，容器中的所有子元素都將進(jìn)行水平排列，類似于強(qiáng)制進(jìn)行了一個(gè)左浮動(dòng)，所以容器子元素的float和clear屬性會(huì)失效。同時(shí)，容器中的子元素的對(duì)齊方式將不受vertical-align控制，即vertical-align也會(huì)失效。

<style>
#main{
    width:800px;
    height:300px;
    display:flex;
    font-size: 20px;
    background: red;
}
</style>

<div id="main">
  <div style="background-color:coral;" class="item-1">紅色</div>
  <div style="background-color:lightblue;" class="item-2">藍(lán)色</div>  
  <div style="background-color:lightgreen;" class="item-3">帶有更多內(nèi)容的綠色啊</div>
</div>

① 在沒(méi)有給容器設(shè)置垂直方向?qū)R方式同時(shí)容器子元素也沒(méi)有設(shè)置高度，那么容器子元素的高度是和容器的高度是一樣的，如上，容器中所有的子元素的高度都會(huì)變?yōu)?00px。

② 默認(rèn)情況下，容器下的子元素的寬度是不會(huì)自動(dòng)放大的，即默認(rèn)以元素自身的實(shí)際寬度顯示。如圖所示:

③ 默認(rèn)情況下，容器下的子元素的寬度是可以縮小的，當(dāng)容器中所有子元素的寬度之和超過(guò)了容器的寬度，默認(rèn)不會(huì)換行顯示，那么就需要縮小容器子元素的寬度以保證容器能夠容納下所有的子元素。但容器子元素的寬度并不是無(wú)限縮小的，即縮小到不能縮小為止。

.item-1 {
    width: 200px;
}
.item-2 {
    width: 8800px;
}
.item-3 {
    width: 8800px;
}

比如上面，item2、item3寬度設(shè)置成了8800px，容器中所有子元素的寬度和為17800px，遠(yuǎn)遠(yuǎn)超出了容器的寬度800px，所以容器中的所有子元素必須按比例壓縮，item1元素的寬度應(yīng)變?yōu)?00 - 191.01 = 8.99px，而item1最小被壓縮為存放一個(gè)字所需要的寬度，即剛好等于字體的大小，即20px，所以item1的寬度將變?yōu)?0px。

④ 默認(rèn)情況下，容器中的子元素可以被壓縮到最小為止，但是當(dāng)壓縮到最小后仍然放不下所有的子元素，那么子元素就會(huì)被放到容器的外面。

⑤ 如果給容器添加一個(gè)垂直方向的對(duì)齊方式，那么容器中所有子元素的高度將變?yōu)閷?shí)際的高度，不會(huì)與容器等高。

#main{
    width:800px;
    height:300px;
    display:flex;
    font-size: 20px;
    background: red;
    align-items: flex-start;/*添加垂直方向?qū)R方式*/
}

三、容器屬性設(shè)置

容器默認(rèn)存在兩根軸：水平的主軸和垂直的交叉軸。主要就是設(shè)置容器的主軸方向、超過(guò)容器后是否換行顯示、水平對(duì)齊方式、垂直對(duì)齊方式。

① flex-direction : 用于設(shè)置主軸的方向，默認(rèn)值為row，即容器中所有子元素水平排列。

column: 表示容器中所有子元素垂直排列。

row-reverse: 表示反轉(zhuǎn)容器中所有子元素的順序，并且起點(diǎn)靠右，即靠右對(duì)齊。

column-reverse: 表示反轉(zhuǎn)容器中所有子元素的順序，并且起點(diǎn)靠下，即靠容器底部對(duì)齊。

② flex-wrap: 用于設(shè)置容器中子元素放不下的時(shí)候是否換行。默認(rèn)值為nowrap，即不換行，即使放不下也不換行。

wrap : 表示可以換行，當(dāng)設(shè)置為wrap可以換行的時(shí)候，容器中的元素就不會(huì)被壓縮，而是采用換行顯示。

#main {
    width:800px;
    height:300px;
    display:flex;
    background: red;
    flex-wrap: wrap; /*放不下的時(shí)候可以換行*/
    font-size: 20px;
}
.item-1 {
    width: 300px;
}
.item-2 {
    width: 300px;
}
.item-3 {
    width: 300px;
}

wrap-reverse : 表示換行顯示之后對(duì)行排列順序進(jìn)行反轉(zhuǎn)。

wrap:

wrap-reverse:

③ flex-flow: 是flex-direction 屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap，即主軸為水平方向，不換行。

④ justify-content: 用于設(shè)置主軸方向的對(duì)齊方式。

⑤ align-items: 用于設(shè)置項(xiàng)目在交叉軸(非主軸)上對(duì)齊方式。

四、容器中元素(項(xiàng)目)屬性設(shè)置

① order: 用于設(shè)置容器元素的排列順序，默認(rèn)值為0，數(shù)值越小，排列越靠前。

.item-2 {
    order: -1; /*將item-2的order設(shè)置為-1，可以讓item-2排在前面*/
}

② flex-grow: 用于設(shè)置容器元素的放大比例，默認(rèn)值為0，即如果存在剩余空間，也不放大。

③ flex-shrink: 用于設(shè)置容器元素的縮小比例，默認(rèn)值為1，即如果空間不足，該項(xiàng)目將縮小。

④ flex-basis: 用于設(shè)置容器元素占的大小，默認(rèn)值為auto，即與容器元素的實(shí)際大小一致。進(jìn)行縮放的時(shí)候會(huì)根據(jù)該值來(lái)進(jìn)行計(jì)算是否有多余的縮放空間。

⑤ flex: 是flex-grow、flex-shrink 、flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto，即不可放大、可縮小、大小與容器元素大小一致，后兩個(gè)屬性可選。

.item-2 {
    flex: 0 1 auto;/*注意三個(gè)值之間是空格二不是逗號(hào)*/
}

⑥ align-self: 用于單獨(dú)設(shè)置某個(gè)容器元素的對(duì)齊方式，默認(rèn)值為auto，表示繼承父元素的對(duì)齊方式。

.item-2 {
    align-self: center;/*單獨(dú)設(shè)置item-2居中對(duì)齊*/
}

五、felx:1 和flex: auto的區(qū)別

從上面可知，flex的默認(rèn)值為 0 1 auto。flex的值比較靈活，可以設(shè)置很多種值，如:
① none: 此時(shí)等于 0 0 auto。

.item {
    flex: none; // 值為none
}
// 等價(jià)于
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

② auto: 此時(shí)等于 1 1 auto。

.item {
    flex: auto; // 值為auto
}
// 等價(jià)于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

③ 一個(gè)非負(fù)數(shù)字: 此時(shí)這個(gè)非負(fù)數(shù)字指的是flex-grow的值，flex-shrink采用默認(rèn)值1，但是flex-basis值為0%，如:

.item {
    flex: 1; // 值為一個(gè)非負(fù)數(shù)字
}
// 等價(jià)于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%; /*這里比較特殊為0%*/
}

④ 取值為兩個(gè)非負(fù)數(shù)字: 此時(shí)分別代表的是flex-grow和flex-shrink的值，flex-basis取值為0%。

.item {
    flex: 6 8; // 值為兩個(gè)非負(fù)數(shù)字
}
// 等價(jià)于
.item {
    flex-grow: 6;
    flex-shrink: 8;
    flex-basis: 0%; /*這里比較特殊為0%*/
}

⑤ 一個(gè)長(zhǎng)度或百分比: 此時(shí)這個(gè)值為flex-basis的值，flex-grow 取值為 1，flex-shrink 取值為 1

.item {
    flex: 200px; // 值為一個(gè)像素值
}
// 等價(jià)于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;
}

.item {
    flex: 100%; // 值為一個(gè)百分?jǐn)?shù)
}
// 等價(jià)于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
}

需要注意的是，如果flex-basis設(shè)置為百分比，那么其相對(duì)的是容器的大小的百分比，而不是自身的大小的百分比。

從上可以看到，當(dāng)flex的值為none或者auto或者不設(shè)置的時(shí)候，flex-basis的值才是auto；其他情況如flex的值為數(shù)字的時(shí)候，flex-basis的值則為0%。

所以flex: 1和flex: auto的區(qū)別就是，flex-basis的值不同，flex:1的時(shí)候flex-basis值為0%；flex: auto的時(shí)候，flex-basis的值為auto。

六、容器元素放大或縮小值計(jì)算

① 放大的情況
主要就是根據(jù)flex-basis的值計(jì)算出容器是否有剩余空間，如果有剩余空間，并且該容器中某個(gè)子元素是可以放大的，那么用該子元素的flex-grow值比上容器中所有子元素的flex-grow值之和計(jì)算出該容器子元素的放大系數(shù)，然后乘以剩余空間的大小即是該容器子元素需要放大的像素值。

#main{
    width:800px;
    height:300px;
    display:flex;
    background: red;
    font-size: 20px;
}
.item-1 {
    width: 200px;
    flex: 2 1 auto;
}
.item-2 {
    width: 200px;
    flex: 3 1 10%;/*這里flex-basis值相當(dāng)于是80px*/
}
.item-3 {
    width: 100px;
    flex: 0 1 220px;
}

itme-1的flex-basis為auto，所以值和元素本身大小一致，即200px;
item-2的flex-basis為10%，其相對(duì)的是容器自身的大小，即800px * 10% = 80px;
item-3的flex-basis為設(shè)置的220px，這里需要注意的是，雖然width設(shè)置的為100px，但是width不會(huì)其作用，仍然會(huì)以flex-basis為基準(zhǔn)。
首先根據(jù)flex-basis計(jì)算出剩余空間 = 800px - (200px + 80px + 220px) = 300px;
由于剩余空間為300px > 0，所以容器中的子元素可以放大，由于item-3的flex-grow值為0，所以item-3不會(huì)放大，仍然以220px顯示。
item-1的放大值 = 2 / (2 + 3) * 300px = 120px;
item-2的放大值 = 3 / (2 + 3) * 300px = 180px;
所以，最終item-1的大小 = 200px + 120px = 320px;
item-2的大小 = 80px + 180px = 260px;
item-3的大小 = 220px;

② 縮小的情況
縮小的情況也是先根據(jù)flex-basis的值計(jì)算出容器超出容器多少空間，但是其不是簡(jiǎn)單的根據(jù)flex-shrink的值計(jì)算出縮放比例，而是根據(jù)容器中某個(gè)元素的flex-basis值乘以flex-shrink的值占容器中所有子元素的flex-basis乘以flex-shrink的值之和來(lái)計(jì)算縮放比例的。

#main{
    width:800px;
    height:300px;
    display:flex;
    background: red;
    font-size: 20px;
}
.item-1 {
    width: 200px;
    flex: 0 2 auto;
}
.item-2 {
    width: 200px;
    flex: 0 3 100%;/*這里flex-basis值相當(dāng)于是800px*/
}
.item-3 {
    width: 100px;
    flex: 0 0 200px;
}

itme-1的flex-basis為auto，所以值和元素本身大小一致，即200px;
item-2的flex-basis為100%，其相對(duì)的是容器自身的大小，即800px * 100% = 800px;
item-3的flex-basis為設(shè)置的200px，這里需要注意的是，雖然width設(shè)置的為100px，但是width不會(huì)其作用，仍然會(huì)以flex-basis為基準(zhǔn)。
首先根據(jù)flex-basis計(jì)算出超出空間 = (200px + 800px + 200px) - 800px = 400px;
由于超出空間為400px > 0，所以容器中的子元素需要縮小，由于item-3的flex-shrink值為0，所以item-3不會(huì)縮小，仍然以200px顯示。
item-1的縮小值 = (2 200px / (2 200px + 3 800px + 0 200px)) * 400px = 57.14px;
item-2的縮小值 = (3 800px / (2 200px + 3 800px + 0 200px)) * 400px = 342.86px;
所以，最終item-1的大小 = 200px - 57.14px = 142.86px;
item-2的大小 = 800px - 342.86px = 457.14px;
item-3的大小 = 200px;