當(dāng)前位置：首頁(yè) >

弹性布局----Flex

發(fā)布時(shí)間：2023/12/10 38 豆豆

生活随笔收集整理的這篇文章主要介紹了弹性布局----Flex 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.背景

　　傳統(tǒng)的布局方案基于盒狀模型,依賴display + position + float 的方式實(shí)現(xiàn),靈活性較差,對(duì)于那些特殊的布局非常不方便.

　　2009年,W3C提出了一種新的方案--Flex布局.

2.什么是Flex布局?

　　Flex是Flexible Box的縮寫(xiě),意為"彈性布局",用來(lái)為盒模型提供最大的靈活性,以便我們能夠簡(jiǎn)便、完整、響應(yīng)式的實(shí)現(xiàn)多種網(wǎng)頁(yè)布局.

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

　.box {display: flex; /*行內(nèi)元素設(shè)置為 inline-flex*/}.box .item {width: 100px;height: 100px;background-color: red;margin-left: 10px;}

　　注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

3.基本概念

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

　　容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。

　　Flex項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

　　Flex屬性分為兩部分，一部分作用于容器稱容器屬性，另一部分作用于項(xiàng)目稱為項(xiàng)目屬性。下面我們就分別來(lái)介紹它們。

4.Flex容器的屬性

4.1?flex-direction屬性

flex-direction屬性決定主軸的方向(即項(xiàng)目排列的方向)

基本語(yǔ)法:

.box {flex-direction: row | row-reverse | column | column-reverse; }

說(shuō)明:

? ?(1)row表示從左向右排列

　(2)row-reverse表示從右向左排列

　　(3)column表示從上向下排列

　　(4)column-reverse表示從下向上排列

4.2 flex-warp屬性

默認(rèn)情況下,Flex項(xiàng)目都排在一條軸線上.我們可以通過(guò)對(duì)flix-warp的屬性的設(shè)置,讓Flex項(xiàng)目是否換行

基本語(yǔ)法:

.box {flex-wrap: nowrap | wrap | wrap-reverse; }

說(shuō)明:

(1)nowrap:所有項(xiàng)目單行排列

(2)warp:所有項(xiàng)目多行排列,按照從上到下的順序

(3)warp-reverse:所有項(xiàng)目多行排列,按照從上到下的順序

4.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，用來(lái)設(shè)置項(xiàng)目的排列方式。默認(rèn)值為row nowrap

基本語(yǔ)法：

.box {flex-flow: <flex-direction> || <flex-wrap>; }

例如我給容器設(shè)置 flex-flow: row wrap-reverse;就是主軸從左向右，從下到上多行排列

4.4?justify-content

　　justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式及額外空間的分配方式。

?基本語(yǔ)法：

.box {justify-content: flex-start | flex-end | center | space-between | space-around; }

說(shuō)明：

? (1)flex-start：左對(duì)齊

? (2)flex-end：右對(duì)齊

? (3)center：居中

? (4)space-between：項(xiàng)目均勻分布，項(xiàng)目第一項(xiàng)在主軸起點(diǎn)，最后一項(xiàng)在主軸終點(diǎn)

? (5)space-around:項(xiàng)目?jī)蓚?cè)的間隔相等，項(xiàng)目之間的距離是兩側(cè)距離的2倍

? (6)space-evenly:項(xiàng)目均勻分布

4.5 align-items

　　align-items屬性定義項(xiàng)目在交叉軸上的對(duì)齊方式。

基本語(yǔ)法：

.box {align-items: stretch | flex-start | flex-end | center | baseline; }

說(shuō)明：

（1）stretch:交叉軸方向拉伸顯示

（2）flex-start:項(xiàng)目按交叉軸起點(diǎn)線對(duì)齊

（3）flex-end:項(xiàng)目按交叉軸終點(diǎn)線對(duì)齊

（4）center:交叉軸方向項(xiàng)目中間對(duì)齊

（5）baseline:交叉軸方向按第一行文字基線對(duì)齊

4.6 align-content

　　align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

基本語(yǔ)法：

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

說(shuō)明：

（1）flex-start:與交叉軸的起點(diǎn)對(duì)齊

（2）flex-end:與交叉軸的終點(diǎn)對(duì)齊

（3）center:與交叉軸的中點(diǎn)對(duì)齊

（4）space-between: 與交叉軸兩端對(duì)齊，軸線之間平均分布

（5）space-around:每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍

（6）stretch:軸線占滿整個(gè)交叉軸。

5.Flex項(xiàng)目屬性

5.1 order

? ? ?默認(rèn)情況下，Flex項(xiàng)目是按照在代碼中出現(xiàn)的先后順序排列的。然而order屬性可以控制項(xiàng)目在容器中的先后順序。

基本語(yǔ)法：

.item {order: <integer>; }

假如有四個(gè)盒子按照1，2，3，4排列，我想讓2號(hào)盒子排在第一位，那么就把2號(hào)盒子的order的值寫(xiě)成最小即可，order可以設(shè)置負(fù)值

5.2 flex-grow

?flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

?基本語(yǔ)法：

.item {flex-grow: <number>; /* default 0 */ }

　　?如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間(如果有的話)

　　如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

5.3?flex-shrink

　　flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

基本語(yǔ)法：

.item {flex-shrink: <number>; /* default 1 */ }

　　如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。

　　負(fù)值對(duì)該屬性無(wú)效

5.4?flex-basis

?　　flex-basis屬性定義項(xiàng)目在分配額外空間之前的默認(rèn)尺寸。屬性值可以是長(zhǎng)度（20%，10rem等）或者關(guān)鍵字auto。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

基本語(yǔ)法:

.item {flex-basis: <length> | auto; /* 默認(rèn) auto */ }

說(shuō)明:

(1) flex-basis:auto

(2)flex-basis:3em

(3) flex-basis:30%

5.5 flex

　　flex屬性是flex-grow,?flex-shrink?和?flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

基本語(yǔ)法:

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

5.6?align-self

　　align-self屬性定義項(xiàng)目的對(duì)齊方式，他允許每個(gè)項(xiàng)目有不一樣的對(duì)其方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。?除了auto，其他都與align-items屬性完全一致。

基本語(yǔ)法:

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }

6.Flex實(shí)例

6.1 網(wǎng)格布局

　　(1) 最簡(jiǎn)單的網(wǎng)格布局，就是平均分布。在容器里面平均分配空間，需要設(shè)置項(xiàng)目的自動(dòng)縮放。

html代碼:

css代碼:

.box {display: flex;width: 550px; } .box .item {flex: 1;background-color: red;margin-right: 10px;border-radius: 5px;font-size: 20px;text-align: center; }

?(2) 百分比布局

　　設(shè)置某個(gè)網(wǎng)格的寬度為固定百分比,其它網(wǎng)格平均分配剩余的空間

html代碼

css代碼

.box14 {display: flex;width: 550px;margin-bottom: 10px; } .box14 .item14 {flex: 1;background-color: red;margin-right: 10px;border-radius: 5px;font-size: 20px;text-align: center; } .box14 .item14:first-child {flex: 0 0 50%; } .box14 .item14:nth-child(2){flex: 0 0 25%; }

6.2 圣杯布局

　　圣杯布局指的是一種最常見(jiàn)的網(wǎng)站布局。頁(yè)面從上到下，分成三個(gè)部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導(dǎo)航、主欄、副欄?！?/p>

html代碼:

<div class="box15"><header>header</header><div class="connent"><div class="main">main</div><div class="left">left</div><div class="right">right</div></div><footer>footer</footer></div>

　　*最外層盒子應(yīng)該是body標(biāo)簽,為了演示畫(huà)了一個(gè)600*600的盒子

css代碼:

.box15 {width: 600px;height: 600px;font-size: 30px;color: #fff;text-align: center;display: flex;flex-direction: column; } .box15 header,.box15 footer {height: 50px;background-color: red; } .box15 .connent {display: flex;flex: 1; } .box15 .connent .main {flex: 0 0 400px;background-color: pink; } .box15 .connent .left, .box15 .connent .right{flex: 0 0 100px;background-color: #ccc; } .box15 .connent .left {order: -1; }

6.3 篩子的布局

(1)

html代碼:

css代碼:

.box16 {width: 100px;height: 100px;background-color: #ccc;border-radius: 5px;display: flex;justify-content: center;align-items: center; } .box16 .item {width: 15px;height: 15px;background-color: #000;border-radius: 50%; }

(2)

html代碼:

css代碼:

.box17 {width: 100px;height: 100px;background-color: #ccc;border-radius: 5px;display: flex; } .box17 .item {width: 15px;height: 15px;background-color: #000;border-radius: 50%; } .box17 .item:nth-child(2) {align-self: center; } .box17 .item:nth-child(3) {align-self: flex-end; }

6.4 九宮格效果

html代碼:

css代碼

.box18 {width: 350px;display: flex;flex-wrap: wrap } .box18 .item {width: 100px;height: 100px;background-color: red;margin: 5px 5px; }

6.5 條件搜索

　　像是一些后臺(tái)OA可能用到很多條件查詢并列在一起,如果布局的整齊些,可以用Flex布局

html代碼:

css代碼:

.box19 {display: flex;flex-wrap: wrap; } .box19 .search {width: 150px;display: flex;margin: 5px 20px 0 0; } .box19 .search span {font-size: 14px;color: #000;margin-right: 5px; } .box19 .search select {flex-grow: 1 }

以上所有的案例都放在了我的github中,克隆地址?

轉(zhuǎn)載于:https://www.cnblogs.com/qisi007/p/9640287.html

總結(jié)

以上是生活随笔為你收集整理的弹性布局----Flex的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：计算机应用中级职称报告,中级工程师职称总
下一篇： matlab写函数进行坐标正反算,基于m