欧美午夜诱惑在线_一区二区三级片_国产成人综合v在线_国产91精品无码免费_高清综合亚洲三级_黄色软件下载观看_上萬網友分享国产精品高潮呻吟久久av心得_美女扒开尿眼无遮挡免费视频_好紧好湿好黄的视频免费_亚洲日韩欧美中字五月天

本篇內(nèi)容介紹了“Flex布局是怎樣的，默認(rèn)特性情況有哪些”的有關(guān)知識，在實(shí)際項(xiàng)目的操作過程或是學(xué)習(xí)過程中，不少人都會(huì)遇到這樣的問題，接下來就讓小編帶大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、Flex 布局簡介

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

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

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

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

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

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

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

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

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

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

.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è)垂直方向的對齊方式，那么容器中所有子元素的高度將變?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è)置容器的主軸方向、超過容器后是否換行顯示、水平對齊方式、垂直對齊方式。

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

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

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

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

② 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 : 表示換行顯示之后對行排列順序進(jìn)行反轉(zhuǎn)。

wrap:

wrap-reverse:

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

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

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

四、容器中元素(項(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ù)該值來進(jìn)行計(jì)算是否有多余的縮放空間。

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

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

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

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

五、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è)長度或百分比: 此時(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è)置為百分比，那么其相對的是容器的大小的百分比，而不是自身的大小的百分比。

從上可以看到，當(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%，其相對的是容器自身的大小，即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ì)算出容器超出容器多少空間，但是其不是簡單的根據(jù)flex-shrink的值計(jì)算出縮放比例，而是根據(jù)容器中某個(gè)元素的flex-basis值乘以flex-shrink的值占容器中所有子元素的flex-basis乘以flex-shrink的值之和來計(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%，其相對的是容器自身的大小，即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

到此這篇關(guān)于“Flex布局是怎樣的，默認(rèn)特性情況有哪些”的文章就介紹到這了,更多相關(guān)內(nèi)容請搜索群英網(wǎng)絡(luò)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持群英網(wǎng)絡(luò)！

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• CSS pointer-events屬性的用法是怎樣，應(yīng)用場景是什么

  這篇文章主要介紹了CSS pointer-events屬性的使用,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

• 如何用純CSS實(shí)現(xiàn)根據(jù)鼠標(biāo)進(jìn)入方向移動(dòng)物體的功能

  在之前某一個(gè)前端技術(shù)群里，有一個(gè)群友說他面試的時(shí)候遇到了一個(gè)問題，就是面試官讓他用純 CSS 來實(shí)現(xiàn)一個(gè)根據(jù)鼠標(biāo)移動(dòng)位置覺得物體移動(dòng)方向的 DEMO。

• CSS中的link和@import是什么關(guān)系,有何差別

  從屬關(guān)系區(qū)別。加載順序區(qū)別。兼容性區(qū)別。DOM可控性區(qū)別。權(quán)重區(qū)別，link引入的樣式權(quán)重大于@import引入的樣式。

• 新手怎么理解CSS選擇器的關(guān)系

  父元素： 直接包含其他元素，這個(gè)元素就是包含元素的父元素。祖先元素：包含其他元素，這個(gè)元素就是包含元素的祖先元素。子元素： 直接被包含的元素。后代元素： 被包含的元素。

• CSS怎樣做自適應(yīng)分割線，方法有哪一些

  這篇文章主要介紹了CSS巧妙實(shí)現(xiàn)自適應(yīng)分隔線的N種方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下