CSS: Flex 彈性布局

彈性元素是 container直接的在文檔流中的子元素

10年的阿巴嘎網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整阿巴嘎建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“阿巴嘎網(wǎng)站設(shè)計(jì)”,“阿巴嘎網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

container在文檔流中的子元素才是彈性子元素

彈性元素的默認(rèn)寬高為內(nèi)容寬高

flex-direction: row|row-reverse|column|column-reverse

container內(nèi)的排列順序: 從左往右 從右往左 從上往下 從小往上(都是從container對(duì)應(yīng)方向邊緣開(kāi)始)

flex-wrap: nowrap|wrap|wrap-reverse

order: integer

initial: 0

兩個(gè)黃色元素沒(méi)有設(shè)置order, 默認(rèn)為0

flex-basis: height|width

設(shè)置的是寬還是高根據(jù)主軸來(lái)定, 如果主軸是行則設(shè)置默認(rèn)寬度, 如果主軸是列則設(shè)置默認(rèn)高度

flex-grow: integer

initial: 0

彈性元素的寬或高計(jì)算:

flex-basis + flow-grow/sum(flow-grow)*remain

flex-shrink: integer

initial: 1

彈性元素的寬或高計(jì)算:

flex-basis + flow-shrink/sum(flow-shrink)*remain

這里的remain是負(fù)值, 表示超出的內(nèi)容大小

flex: flex-grow || flex-shrink || flex-basis

initial: 0 1 main-size ( main-size 元素沿主軸方向默認(rèn)尺寸)

justify-content: flex-start | flex-end | center | space-between | space-around

效果依次如下:

align-items: flex-start | flex-end | center | stretch | baseline

align-self: auto | flex-start | flex-end | center | baseline | stretch

initial: auto

當(dāng)多行時(shí): 應(yīng)用于行

align-content: flex-start | flex-end | center | space-between | space-around | stretch

css基礎(chǔ)之flex布局

很多時(shí)候跟著書(shū)和不系統(tǒng)的視頻學(xué)習(xí)，會(huì)發(fā)現(xiàn)沒(méi)有方向，學(xué)了很多卻不知道自己能夠做出什么成績(jī)。

學(xué)習(xí)要有一個(gè)清晰的職業(yè)學(xué)習(xí)規(guī)劃，學(xué)習(xí)過(guò)程中會(huì)遇到很多問(wèn)題，你可以到我們的web學(xué)習(xí)交流君羊- 點(diǎn)擊此處 ，

同時(shí)準(zhǔn)備了基礎(chǔ)，進(jìn)階學(xué)習(xí)資料。學(xué)友都會(huì)在里面交流，分享一些學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，每天也會(huì)準(zhǔn)時(shí)講一些項(xiàng)目實(shí)戰(zhàn)案例。

————————————————

1.什么是flex

flex 是 Flexible Box 的縮寫(xiě),意為 彈性布局

flex布局中把一個(gè)元素作為容器，容器中的子元素稱(chēng)為項(xiàng)目

可以通過(guò)容器的flex屬性，設(shè)置所有項(xiàng)目的排列樣式。也可以通過(guò)項(xiàng)目的flex屬性，設(shè)置指定項(xiàng)目的排列樣式。

2.flex布局的方向

flex布局項(xiàng)目的排列方向可以有兩個(gè)維度，一水平，二垂直

項(xiàng)目排列方向稱(chēng)為主軸，與主軸垂直的方向叫交叉軸

在每個(gè)軸上有兩個(gè)方向，從左至右，從右到左；從上到下，從下到上。

2.1 flex水平布局

在水平維度，默認(rèn)方向是從左至右

可以通過(guò)?flex-direction：row-reverse設(shè)置為從右到左排列

效果圖：

1).默認(rèn)方向,從左至右

2).反方向

2.2 垂直布局

效果圖：

1).默認(rèn)方向，從上到下

2).反方向

3. 容器內(nèi)項(xiàng)目換行

通過(guò)flex-wrap屬性，設(shè)置項(xiàng)目在容器內(nèi)是否可以換行，默認(rèn)不允許換行。

不換行的稱(chēng)為單行容器，換行的稱(chēng)為多行容器

也可以通過(guò)flex-flow屬性同時(shí)設(shè)置容器主軸方向和是否換行（推薦使用）

效果圖：

1).默認(rèn)不允許換行，項(xiàng)目被壓縮

2).允許換行，當(dāng)剩余寬度不足容納一個(gè)項(xiàng)目塊時(shí)，就換行

相關(guān)知識(shí)：

css如何實(shí)現(xiàn)邊框長(zhǎng)度控制功能

詳細(xì)介紹css中的數(shù)學(xué)表達(dá)式calc()

關(guān)于書(shū)籍：需要學(xué)習(xí)資料的小伙伴們可以加群， 點(diǎn)擊此處

CSS flex布局

flex布局是一種無(wú)論對(duì)于塊級(jí)元素還是行內(nèi)元素都可以被采用的布局，且它使用起來(lái)也是十分的方便

首先是要指定flex布局

當(dāng)我們指定flex布局方式的時(shí)候，其屬性值 float、clear、vertical-align就失效了

無(wú)論是塊級(jí)元素還是行內(nèi)元素，當(dāng)他們指定使用flex布局的時(shí)候，就被稱(chēng)為“ 容器 ”（flex container）

他們的子元素自動(dòng)成為容器成員，被稱(chēng)為“ 項(xiàng)目 ”（flex item）。

flex布局是通過(guò)兩根軸決定的，其實(shí)現(xiàn)方式其實(shí)和直角坐標(biāo)系很像，都是通過(guò)軸來(lái)進(jìn)行定位

每個(gè)容器都有兩根軸，分別為水平的 主軸 （main axis）和垂直的 交叉軸 （cross axis）。主軸開(kāi)始位置為main start，結(jié)束位置為main end。交叉軸的開(kāi)始位置為cross start，結(jié)束位置為cross end

容器內(nèi)的項(xiàng)目都是沿著主軸排列的，這點(diǎn)和塊級(jí)元素有較大的不同，因?yàn)槊總€(gè)塊級(jí)元素默認(rèn)是占有一整行的，且排列方式為由上到下排列。

每個(gè)項(xiàng)目都占有一定的主軸空間和交叉軸空間，分別被稱(chēng)為main size和cross size

flex布局下，容器和項(xiàng)目都有其各自的屬性

決定主軸的方向，即決定項(xiàng)目的排列方向，其屬性值有

決定了當(dāng)一行放不下所有的項(xiàng)目時(shí)，其換行與否以及換行方式

定義了項(xiàng)目在主軸上的對(duì)齊方式，假設(shè)主軸是從左向右的水平排列

定義了項(xiàng)目在交叉軸上的對(duì)齊方式，假設(shè)交叉軸是從上到下排列

在這里重點(diǎn)說(shuō)一下上面這兩個(gè)屬性。

這樣可以很方便的設(shè)置水平垂直居中

另外說(shuō)一下align-items：baseline這個(gè)屬性值。如描述，這個(gè)屬性值是通過(guò)文字來(lái)進(jìn)行對(duì)齊，而不是每個(gè)項(xiàng)目的邊界或是中心

在容器內(nèi)具有多根主軸線(xiàn)時(shí)，可以定義這些軸線(xiàn)的對(duì)齊方式

align-content屬性和justify-content屬性，這兩者的屬性值有較大的相似之處，這是因?yàn)?，justify-content屬性定義的是多個(gè)項(xiàng)目在主軸上的對(duì)齊方式，而align-content屬性定義的是多根主軸在交叉軸上的對(duì)齊方式，這兩者描述的對(duì)象就幾乎一致

定義了多個(gè)項(xiàng)目的排列順序，其使用方式和z-index屬性值有異曲同工之處，都是指定屬性值，屬性值為整數(shù)。對(duì)于order屬性，屬性值越小，則排列越靠前；對(duì)于z-index屬性，則屬性值越小，就越在底層

設(shè)置了項(xiàng)目的放大比例，其默認(rèn)值為1。

設(shè)置了項(xiàng)目的縮小比例，默認(rèn)值為1。

在分配多余空間之前，為項(xiàng)目定義其占據(jù)的主軸空間

用來(lái)設(shè)置單個(gè)項(xiàng)目與其他項(xiàng)目不同的對(duì)齊方式，其屬性值和align-items的屬性的屬性值基本一致，不過(guò)其默認(rèn)值為auto，表示繼承父元素的屬性值。

CSS3-flex彈性布局之flex屬性

flex 大致分為兩類(lèi)屬性：容器屬性和項(xiàng)目屬性（容器內(nèi)部項(xiàng)目的屬性）。flex 屬性（ flex：1 ）如就給容器內(nèi)部項(xiàng)目設(shè)置的屬性。

這里的 wrap 指容器，item 我們稱(chēng)作項(xiàng)目。我們還需要知道 flex 屬性是 flex-grow , flex-shrink 和 flex-basis 的簡(jiǎn)寫(xiě)，默認(rèn)值為 0 1 auto 。后兩個(gè)屬性可選。接下來(lái)我們逐一介紹這三個(gè)屬性:

flex grow 屬性設(shè)置 flex 容器中的 ** 可用空間 ** 應(yīng)分配給該項(xiàng)的大小。如果所有同級(jí)項(xiàng)目都具有相同的值，則所有項(xiàng)目將獲得相同的可用空間份額，否則將根據(jù)定義的不同比率進(jìn)行分配。

從左到右三個(gè)紅色方塊的寬度依次為 48.5 + 97 + 48.5 = 194，加上 6 個(gè)邊框剛好 200。三個(gè) item 按照 1:2:1 的比例占滿(mǎn)了容器。上面我們并沒(méi)有給 item 添加寬度，如果我們給它們加上 width 會(huì)怎么計(jì)算呢？

我們通過(guò)控制臺(tái)查看三個(gè) item 的寬度從左到右依次是 61 + 72 + 61 = 194，加上 6 個(gè)邊框剛好 200。但是三個(gè)元素并不是按照 1:2:1 的比例分配的。這是為什么呢？仔細(xì)看定義后知道，我們給 wrap 設(shè)置了 width 為 200px，三個(gè) item 設(shè)置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分別分配給了三個(gè) width 為 50px 的 item。 注意這個(gè)比例是剩余空間分配的分配比例，而不是分配后元素自身的比例。

設(shè)置項(xiàng)目的收縮比例，如果空間不足，該項(xiàng)目將縮小。

默認(rèn)值為 1。

設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。如果所有子元素的基準(zhǔn)值之和大于剩余空間，則會(huì)根據(jù)每項(xiàng)設(shè)置的基準(zhǔn)值，按比率伸縮剩余空間。

flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡(jiǎn)寫(xiě)。

網(wǎng)站題目：css樣式flex,CSS樣式代碼的三種放置方式是什么?
文章路徑：http://aaarwkj.com/article12/dssppgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、、品牌網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)