一、Flex 布局簡介

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

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

// 將塊級元素div設置為flex布局
div {
    display: flex;
}

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

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。

二、Flex布局的默認特性

默認情況下，容器中的所有子元素都將進行水平排列，類似于強制進行了一個左浮動，所以容器子元素的float和clear屬性會失效。同時，容器中的子元素的對齊方式將不受vertical-align控制，即vertical-align也會失效。

<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">藍色</div>  
  <div style="background-color:lightgreen;" class="item-3">帶有更多內(nèi)容的綠色啊</div>
</div>

① 在沒有給容器設置垂直方向對齊方式同時容器子元素也沒有設置高度，那么容器子元素的高度是和容器的高度是一樣的，如上，容器中所有的子元素的高度都會變?yōu)?00px。

② 默認情況下，容器下的子元素的寬度是不會自動放大的，即默認以元素自身的實際寬度顯示。如圖所示:

③ 默認情況下，容器下的子元素的寬度是可以縮小的，當容器中所有子元素的寬度之和超過了容器的寬度，默認不會換行顯示，那么就需要縮小容器子元素的寬度以保證容器能夠容納下所有的子元素。但容器子元素的寬度并不是無限縮小的，即縮小到不能縮小為止。

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

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

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

⑤ 如果給容器添加一個垂直方向的對齊方式，那么容器中所有子元素的高度將變?yōu)閷嶋H的高度，不會與容器等高。

#main{
    width:800px;
    height:300px;
    display:flex;
    font-size: 20px;
    background: red;
    align-items: flex-start;/*添加垂直方向對齊方式*/
}

三、容器屬性設置

容器默認存在兩根軸：水平的主軸 和 垂直的交叉軸。主要就是設置容器的主軸方向、超過容器后是否換行顯示、水平對齊方式、垂直對齊方式。

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

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

row-reverse: 表示反轉容器中所有子元素的順序，并且起點靠右，即靠右對齊。

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

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

wrap : 表示可以換行，當設置為wrap可以換行的時候，容器中的元素就不會被壓縮，而是采用換行顯示。

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

wrap-reverse : 表示換行顯示之后對行排列順序進行反轉。

wrap:

wrap-reverse:

③ flex-flow: 是flex-direction 屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap，即主軸為水平方向，不換行。

④ justify-content: 用于設置主軸方向的對齊方式。

⑤ align-items: 用于設置項目在交叉軸(非主軸)上對齊方式。

四、容器中元素(項目)屬性設置

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

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

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

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

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

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

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

⑥ align-self: 用于單獨設置某個容器元素的對齊方式，默認值為auto，表示繼承父元素的對齊方式。

.item-2 {
    align-self: center;/*單獨設置item-2居中對齊*/
}

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

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

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

② auto: 此時等于 1 1 auto。

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

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

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

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

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

⑤ 一個長度或百分比: 此時這個值為flex-basis的值，flex-grow 取值為 1，flex-shrink 取值為 1

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

.item {
    flex: 100%; // 值為一個百分數(shù)
}
// 等價于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
}

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

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

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

六、容器元素放大或縮小值計算

① 放大的情況
主要就是根據(jù)flex-basis的值計算出容器是否有剩余空間，如果有剩余空間，并且該容器中某個子元素是可以放大的，那么用該子元素的flex-grow值比上容器中所有子元素的flex-grow值之和計算出該容器子元素的放大系數(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值相當于是80px*/
}
.item-3 {
    width: 100px;
    flex: 0 1 220px;
}

itme-1的flex-basis為auto，所以值和元素本身大小一致，即200px;
item-2的flex-basis為10%，其相對的是容器自身的大小，即800px * 10% = 80px;
item-3的flex-basis為設置的220px，這里需要注意的是，雖然width設置的為100px，但是width不會其作用，仍然會以flex-basis為基準。
首先根據(jù)flex-basis計算出剩余空間 = 800px - (200px + 80px + 220px) = 300px;
由于剩余空間為300px > 0，所以容器中的子元素可以放大，由于item-3的flex-grow值為0，所以item-3不會放大，仍然以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ù)flex-shrink的值計算出縮放比例，而是根據(jù)容器中某個元素的flex-basis值乘以flex-shrink的值占容器中所有子元素的flex-basis乘以flex-shrink的值之和來計算縮放比例的。

#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值相當于是800px*/
}
.item-3 {
    width: 100px;
    flex: 0 0 200px;
}

itme-1的flex-basis為auto，所以值和元素本身大小一致，即200px;
item-2的flex-basis為100%，其相對的是容器自身的大小，即800px * 100% = 800px;
item-3的flex-basis為設置的200px，這里需要注意的是，雖然width設置的為100px，但是width不會其作用，仍然會以flex-basis為基準。
首先根據(jù)flex-basis計算出超出空間 = (200px + 800px + 200px) - 800px = 400px;
由于超出空間為400px > 0，所以容器中的子元素需要縮小，由于item-3的flex-shrink值為0，所以item-3不會縮小，仍然以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;

到此這篇關于淺談Flex布局與縮放比例計算的文章就介紹到這了,更多相關Flex布局與縮放比例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論