中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

Display簡單快速布局

2023-03-09    分類: 網(wǎng)站建設(shè)

在以往的大多數(shù)網(wǎng)頁布局中,經(jīng)常要用到浮動(dòng)或定位、居中,為了實(shí)現(xiàn)這些效果,我們通常會(huì)用到CSS中display屬性 +position屬性 +float屬性來完成,但對(duì)于某些布局非常不方便,往往花費(fèi)不必要的時(shí)間而達(dá)不到想要的效果,CSS3中新特性display: flex的出現(xiàn),使我們能節(jié)省時(shí)間和優(yōu)化代碼,并實(shí)現(xiàn)各種頁面簡單快速布局。Flex是Flexible Box的縮寫,意為"彈性布局",它的強(qiáng)大之處在為盒狀模型提供大的靈活性。而且display: flex兼容大多數(shù)主流瀏覽器,有些瀏覽器使用時(shí)需要加上前綴,比如Webkit內(nèi)核的瀏覽器,必須加上-webkit前綴。
在使用display: flex布局父元素容器為指定彈性盒子時(shí),只需在父元素中設(shè)置:display:flex;而父元素中所包含的子元素的屬性float、clear和vertical-align是沒有效果的;而行內(nèi)元素容器彈性盒子設(shè)置為display:inline-flex;彈性盒子有兩條軸,水平的主軸(橫軸)和垂直的交叉軸(縱軸)。默認(rèn)橫軸為主軸,默認(rèn)自左向右;縱軸為輔軸,默認(rèn)自上而下。
在設(shè)置了display: flex的父元素上,常常會(huì)用到的有關(guān)彈性布局的屬性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ,這幾個(gè)屬性分別從主軸的方向、是否換行、子元素在主軸上的對(duì)齊方式、子元素在交叉軸上的對(duì)齊方式、子元素在多根軸線上的對(duì)齊方式來規(guī)定了子元素在父元素中的彈性,從而來達(dá)到所想實(shí)現(xiàn)的效果。
在定義了父元素為彈性盒子后子元素所擁有的屬性都有:order,flex-grow,flex-shrink,flex-basis,align-self。order規(guī)定了子元素出現(xiàn)的排列循序,值越小,排列越靠前,默認(rèn)為0;flex-grow定義了子元素的放大比例,默認(rèn)為0,表示即使父元素還有剩余空間也不放大該子元素。設(shè)父元素的寬度為500px,三個(gè)子元素寬度分別為100px,如果所有子元素的flex-grow的值為1,則如果父元素有剩余空間,子元素會(huì)等比例放大,即剩余出來的200/3分給三個(gè)子元素;如果是一個(gè)子元素flex-grow為1,一個(gè)為2,第三個(gè)為3,則三個(gè)子元素分別多分到,200*(1/6),200*(2/6),200*(3/6);flex-shrink定義了子元素的縮小比例,默認(rèn)為1,當(dāng)父元素空間不足時(shí),如果各個(gè)條目的flex-shrink值均為1,則表明等比例縮小,如果為0,則表示不縮小。

網(wǎng)站名稱:Display簡單快速布局
當(dāng)前鏈接:http://www.rwnh.cn/news/242825.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站域名注冊(cè)、定制網(wǎng)站、小程序開發(fā)

廣告

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

成都網(wǎng)頁設(shè)計(jì)公司
淳安县| 鸡东县| 城步| 磐安县| 武城县| 黑河市| 成武县| 平山县| 托里县| 绥棱县| 新巴尔虎左旗| 育儿| 调兵山市| 章丘市| 忻城县| 巩留县| 石狮市| 金平| 永仁县| 都江堰市| 社会| 富顺县| 卢湾区| 周宁县| 江津市| 育儿| 保定市| 河北区| 镇远县| 饶平县| 邹平县| 克拉玛依市| 忻州市| 南部县| 大宁县| 新蔡县| 全州县| 蓝山县| 当阳市| 揭东县| 隆子县|