彈性盒模型

BakerJ 發(fā)布于2019-08-30 12:52 / 647人閱讀

摘要：彈性盒模型相比傳統(tǒng)的盒模型，可以更加簡(jiǎn)單的實(shí)現(xiàn)各種布局頁(yè)面簡(jiǎn)單舉一個(gè)例子，代碼如下加上廠商前綴，目前使用方式都有三種寫法，舊的，過(guò)度的，新的的屬性假如的改成也能實(shí)現(xiàn)數(shù)字的垂直居中

彈性盒模型相比傳統(tǒng)的盒模型（display+position+float），可以更加簡(jiǎn)單的實(shí)現(xiàn)各種布局頁(yè)面
簡(jiǎn)單舉一個(gè)例子，代碼如下


   1
   2
   3

css

.row{width:200px;
    height: 50px;
    /*加上廠商前綴，目前使用方式都有三種寫法：1，舊的2，過(guò)度的3，新的*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;}
.row div{ 
    width:50px;height:50px;
    -webkit-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1;
    flex: 1; 
    text-align: center;
    line-height: 5rem;
    background-color: #f69f75;
}

.list的屬性

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow:  || ;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-flow:row nowrap || flex:column wrap

flex-flow：row-reverse nowrap

flex-flow:column nowrap

假如.row div的css改成

.row div{ 
        width:50px;
        height:50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f69f75;
    }

也能實(shí)現(xiàn)數(shù)字的垂直居中

云服務(wù)器 GPU云服務(wù)器盒模型盒模型html嗎簡(jiǎn)述html盒模型盒遙控

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115129.html

相關(guān)文章

CSS中各種布局的背后(*FC)

摘要：中各種布局的背后，實(shí)質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級(jí)盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項(xiàng)目?jī)?nèi)的一切元素都不受影響。 CSS中各種布局的背后，實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 評(píng)論0 收藏0
彈性盒子模型詳解

摘要：二彈性盒模型歷史彈性盒模型歷史英文原版或者查看中文翻譯版另外附上標(biāo)準(zhǔn)文檔彈性盒模型在過(guò)去幾年間制定了三版草案規(guī)范。給子元素直接添加屬性即可七后話以上是本文所有內(nèi)容，以下是小白我的感慨。一、前言由于W3C在制定彈性盒模型內(nèi)容有多版草案，在網(wǎng)上瀏覽了很多視頻和文章，版本有新有舊，所以準(zhǔn)備寫一篇關(guān)于彈性盒模型的文章，一是輔助自己學(xué)習(xí)，二是幫忙其他前端學(xué)習(xí)者更容易地彈性盒模型。二、彈性盒...

rozbo 2019-08-28 18:27 評(píng)論0 收藏0
彈性盒模型，flex布局

摘要：彈性盒模型彈性盒子是的一種新布局模式，由容器父元素和項(xiàng)目子元素組成。彈性盒子是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。彈性盒模???彈性盒子是css3的一種新布局模式，由容器（父元素）和項(xiàng)目（子元素）組成。 ? 彈性盒子是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?? 引入彈性盒模型的目的：提供一種更加有效的方式...

CoderDock 2019-04-23 11:54 評(píng)論0 收藏0
彈性盒模型冷門知識(shí)

摘要：可以出現(xiàn)居中的，兩邊元素分別為彈性盒模型中的標(biāo)簽可能會(huì)出現(xiàn)默認(rèn)寬度，并且不可以用覆蓋，只能設(shè)置為類似以下結(jié)構(gòu)的有一定高度這個(gè)容器占據(jù)下部剩余空間這個(gè)容器在左邊作為目錄這個(gè)容器是一個(gè)搜索欄這里理論上是剩余空可以出現(xiàn)居中的border，兩邊元素分別為49.5px a b 彈性盒模型中的input標(biāo)簽可能會(huì)出現(xiàn)默認(rèn)寬度，并且不可以用fle...

DevYK 2019-08-30 15:52 評(píng)論0 收藏0
彈性盒模型flex

摘要：一是的縮寫，意為彈性布局定義彈性布局二基本定義我只簡(jiǎn)單的說(shuō)一下容器和項(xiàng)目，因?yàn)橹魂P(guān)系容器和項(xiàng)目來(lái)講的個(gè)人理解。它可以設(shè)為或?qū)傩砸粯拥闹担瑒t該項(xiàng)目占據(jù)固定的空間。默認(rèn)值為，表示繼承夫元素的屬性，如果沒(méi)有夫元素，則等同于。一、flex flex是flexible box的縮寫，意為彈性布局；定義彈性布局 display:flex; box{ display:flex; } 二...

Gemini 2019-04-23 11:53 評(píng)論0 收藏0