真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

flex布局基本語法的示例分析

小編給大家分享一下flex布局基本語法的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

成都創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為澄海企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站建設(shè),澄海網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

2009年,W3C提出了一種新的方案—-Flex布局,可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前,它已經(jīng)得到了所有瀏覽器的支持,這意味著,現(xiàn)在就能很安全地使用這項(xiàng)功能

1.什么是flex布局?

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

flex布局 : .box{display:flex;}

行內(nèi)元素也可以使用flex布局 : .box{display:inline-flex;}

Webkit內(nèi)核的瀏覽器,必須加上-webkit前綴 : .box{display:-webkit-flex; display:flex;}

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

2.基本概念

Flex容器(flex container) : 采用Flex布局的元素,稱為flex容器.

Flex項(xiàng)目(flex item) : flex容器的所有子元素,自動(dòng)成為容器成員,即flex項(xiàng)目.

容器的兩根軸線 : 水平的主軸(main axis), 垂直的交叉軸(cross axis).

主軸(main axis) : 開始位置->main start, 結(jié)束位置->main end, 項(xiàng)目默認(rèn)沿主軸排列.

交叉軸(cross axis) : 開始位置->cross start, 結(jié)束位置->cross end

容器內(nèi)的單個(gè)項(xiàng)目占據(jù)的主軸空間叫做->main size, 交叉軸空間叫做->cross size

flex布局基本語法的示例分析

3.FLex屬性

flex屬性分為容器屬性和項(xiàng)目屬性.

容器屬性 : flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

項(xiàng)目屬性 : order, flex-grow, flex-shrink, flex-basis, flex, align-self

3.1容器屬性

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

row : 水平方向,從左到右.(默認(rèn)屬性)

row-reverse : 水平方向,從右到左.

column : 垂直方向,從上到下.

column-reverse : 垂直方向,從下到上.

flex-wrap : 規(guī)定一條軸線排不下,如何換行.

nowrap : 不換行(默認(rèn)屬性)

wrap : 換行,第一行在上邊

wrap-reverse : 換行,第一行在下邊,(只行數(shù)排列相反,單行內(nèi)依舊從左到右排列,每一行都是).

flex-flow : 結(jié)合flex-direction和flex-wrap,寫法如下 

.box{flex-flow:column wrap-reverse}

justify-content : 定義項(xiàng)目在主軸上的對(duì)齊方式

flex-start : 左對(duì)齊(默認(rèn)值),項(xiàng)目以主軸的起點(diǎn)對(duì)齊

flex-end : 右對(duì)齊,項(xiàng)目以主軸的終點(diǎn)

center : 居中

space-between : 兩端對(duì)齊,項(xiàng)目之間間隔相等

space-around : 每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍

align-items : 定義項(xiàng)目在交叉軸的對(duì)齊方式(僅單行,多行對(duì)齊由align-content定義)

stretch : 如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度(默認(rèn)值)

flex-start : 從上到下,以交叉軸的起點(diǎn)為基線,向終點(diǎn)延伸

flex-end : 從下到上,以交叉軸的終點(diǎn)為基線,向起點(diǎn)延伸

center : 交叉軸的中點(diǎn)對(duì)齊,項(xiàng)目的中點(diǎn)放在交叉軸的中點(diǎn)上

baseline : 以一行中每個(gè)項(xiàng)目的第一行文字進(jìn)行對(duì)齊.

align-content : 定義了容器內(nèi)有多行項(xiàng)目時(shí)沿交叉軸的對(duì)齊方式, 如果項(xiàng)目只有一根軸線,該屬性不起作用

stretch : 軸線占滿整個(gè)交叉軸(每行都有一條軸線), 默認(rèn)屬性

flex-start : 以交叉軸的起點(diǎn)對(duì)齊

flex-end : 以交叉軸的終點(diǎn)對(duì)齊

center : 以交叉軸的中點(diǎn)對(duì)齊

space-between : 多行項(xiàng)目在交叉軸上間隔平均分布

space-around : 多行項(xiàng)目在交叉軸上兩側(cè)的間隔都相等。所以,項(xiàng)目在交叉軸上的間隔比項(xiàng)目與邊框的間隔大一倍

注 : justify-content, align-items和align-content是容器的屬性,而不是項(xiàng)目的屬性,是設(shè)定一個(gè)容器內(nèi)項(xiàng)目以軸線上的某一位置對(duì)齊

3.2項(xiàng)目屬性

order : 定義項(xiàng)目的排列順序,數(shù)值越小,排列越靠前.默認(rèn)值為0,寫法如下

 .item{order:5}

flex-grow : 定義屬性項(xiàng)目放大比例,默認(rèn)為1

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

flex-shrink : 定義項(xiàng)目縮小比例,默認(rèn)為1

 如果所有項(xiàng)目的flex-shrink屬性都為1,當(dāng)空間不足時(shí),都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0,其他項(xiàng)目都為1,則空間不足時(shí),前者不縮小.負(fù)值對(duì)該屬性無效

flex-basis : 定義了在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間(main size),瀏覽器根據(jù)這個(gè)屬性,計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto,即項(xiàng)目的本來大小

 它可以設(shè)為跟width或height屬性一樣的值(比如350px),則項(xiàng)目將占據(jù)固定空間

flex : 結(jié)合flex-grow, flex-shrink 和 flex-basis的屬性, 默認(rèn)值為0 1 auto, 推薦優(yōu)先使用

 該屬性有兩個(gè)快捷值:auto (1 1 auto) 和 none (0 0 auto

align-self : 允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,可覆蓋align-items屬性, 默認(rèn)值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch

該屬性可能取6個(gè)值,除了auto,其他都與align-items屬性完全一致

以上是“flex布局基本語法的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


分享名稱:flex布局基本語法的示例分析
文章起源:http://weahome.cn/article/gjghci.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部